整个图像不会在 JavaScript 中绘制在画布上

Question

我正在制作一个照片编辑器，您可以在其中选择上传将在画布上绘制的图像。我让用户在不刷新网站的情况下上传新图片。但是，第二次尝试上传不同的图像时，整个图像将不会绘制在画布上。唯一要绘制的部分是用户在此之前上传的图像的大小。这很奇怪，因为每次用户上传新图片时都会设置新尺寸。

经过反复试验，我发现新的画布大小实际上设置为上传图像的大小。但是，它仍然不会绘制整个图像，即使指定图像应该以画布的大小绘制。因此，问题在于绘制图像的线条，而不是设置画布大小的部分。我尝试绘制图像两次而不是一次，只是为了看看会发生什么。它确实有效，即使用于绘制图像的两条线是相同的。我觉得这很奇怪，我觉得这不是解决问题的正确方法。

这是加载图片的部分代码：

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');

var img;
var ratio;

var overlay = document.getElementById("overlay")

canvas.width = 400;

function handleImage(e){
  var reader = new FileReader();
  reader.onload = function(event){
    img = new Image();
    img.onload = function(){
      ratio = this.height / this.width;
      canvas.height = canvas.width * ratio;
      ctx.drawImage(img,0,0,canvas.width, canvas.height);
    }
    overlay.style = "display: none;"
    img.src = event.target.result;
    window.onbeforeunload = function() {
      return true;
    };
  }
  reader.readAsDataURL(e.target.files[0]);
}

canvas { border: 1px solid; }

<input type="file" id="imageLoader">
<canvas id="imageCanvas"></canvas>
<div id="overlay">Unrelated overlay...</div>

Answer 1

你得到的行为并不奇怪，但非常有意义，因为你应该将画布的大小调整为每次加载的图像的自然尺寸！

是什么让您认为画布会自动调整自己以适应任何加载的图像？

您需要在每次加载新图像时执行此操作...

canvas.width=img.naturalWidth;
canvas.height=img.naturalHeight;
canvas.style.transform='scale(0.5,0.5)';

Answer 2

一段时间后，我发现在重绘图像之前我必须使用clearRect。

现在 JavaScript 代码如下所示：

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');

var img;
var ratio;

var overlay = document.getElementById("overlay")

canvas.width = 400;

function handleImage(e){
  var reader = new FileReader();
  reader.onload = function(event){
    img = new Image();
    img.onload = function(){
      ratio = this.height / this.width;
      canvas.height = canvas.width * ratio;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img,0,0,canvas.width, canvas.height);
    }
    overlay.style = "display: none;"
    img.src = event.target.result;
    window.onbeforeunload = function() {
      return true;
    };
  }
  reader.readAsDataURL(e.target.files[0]);
}