Javascript图像对象不在画布上调整大小答案

【问题标题】：Javascript image object does not resize on canvasJavascript图像对象不在画布上调整大小
【发布时间】：2020-10-19 19:38:33
【问题描述】：

我正在尝试使用此代码调整图像大小并将它们打印在 html 画布上以便以后修改它们：

var wth =  img.clientHeight / img.clientWidth;
img.width=300;
img.height=300 * wth;
ctx.drawImage(img, 0, 0);

但是，这不会改变画布上的结果。对于画布来说，它似乎仍然太大。

当我使用此代码时，正如this 问题中所建议的那样，图像根本不会加载。我不知道是我用错了还是什么，但它就是不起作用。

ctx.drawImage(img, 0, 0, 300, 300 * wth);

这是我的代码：

function preview_image(event) 
{
    
  var output = document.getElementById('output_image');
 var reader = new FileReader();
  var ctx = output.getContext('2d');
 //output.src = "/loading.gif";
 reader.onload = function()
 {
  //output.src = reader.result;
  var img = new Image();   // Create new img element
  img.src = reader.result; // Set source path
  img.onload = function() {
  var wth =  img.clientHeight / img.clientWidth;
  img.width=300;
  img.height=300 * wth;
  ctx.drawImage(img, 0, 0);
       }
 }
 reader.readAsDataURL(event.target.files[0]);
}

body
{
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
 background-color:#0B3861;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
 margin: auto;
}
#output_image
{
margin: auto;
 max-width:300px;
}

.editarea{
width: 50%;
background: #EC6C67;
margin: auto;
}

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ReturNull Photo Editor</title>
    <link rel="stylesheet" href="style.css">
    
    
</head>
<body>
<div id="wrapper">
 <input type="file" accept="image/*" onchange="preview_image(event)"><br><br>
 <div class="editarea"> <!--<img id="output_image" width="250">--> <canvas id="output_image" width="250"></canvas></div>

</div>
</body>
</html>

【问题讨论】：

标签： javascript html image canvas

【解决方案1】：

我更改了ctx.drawImage 函数中的参数：

function preview_image(event) 
{
    
  var output = document.getElementById('output_image');
 var reader = new FileReader();
  var ctx = output.getContext('2d');
 //output.src = "/loading.gif";
 reader.onload = function()
 {
  //output.src = reader.result;
  var img = new Image();   // Create new img element
  img.src = reader.result; // Set source path
  img.onload = function() {
    var wth =  img.clientHeight / img.clientWidth;
    img.width=300;
    img.height=300 * wth;
        ctx.drawImage(img, (output.width / 2) - (img.width / 2), 0, img.width, output.height);
  }
 }
 reader.readAsDataURL(event.target.files[0]);
}

body
{
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
 background-color:#0B3861;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
 margin: auto;
}
#output_image
{
margin: auto;
 max-width:300px;
}

.editarea{
width: 50%;
background: #EC6C67;
margin: auto;
}

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ReturNull Photo Editor</title>
    <link rel="stylesheet" href="style.css">
    
    
</head>
<body>
<div id="wrapper">
 <input type="file" accept="image/*" onchange="preview_image(event)"><br><br>
 <div class="editarea"> <!--<img id="output_image" width="250">--> <canvas id="output_image" width="250"></canvas></div>

</div>
</body>
</html>

【讨论】：

这有点用，但图像看起来失真。我想有一个固定的宽度和一个基于该宽度的高度。