Question

我正在编写一个小片段，允许用户将图像拖动到div容器（dropzone）中，然后在该div中创建一个画布并将图像绘制到div中。但是，这确实有效，我根本无法弄明白。问题是由于某种原因图像被剪裁。我可以确认图像是否正确加载，因为如果不是画布我附加图像对象，它就可以了！显示整个图像。我还尝试在drawImage参数中明确输入宽度和高度，但没有成功。

function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  if(files)
    readFile(files[0]);
}

function applyDataUrlToCanvas(dataUrl) {

  var canvas = document.getElementById('mainCanvas'),
  ctx = canvas.getContext("2d");

  var img = new Image();
  img.src = dataUrl;

  img.onload = function() {
    ctx.drawImage(img, 0, 0, img.width, img.height);
  };
}

//-----------------------------------------------------------------------------

function readFile(file) {

  var dropzone = document.getElementById('dropzone');

  for (var i = dropzone.childNodes.length - 1; i >= 0; i--) {
    dropzone.removeChild(dropzone.childNodes[i]);
  }

  var canvas = document.createElement('canvas');
  canvas.id = 'mainCanvas';
  canvas.style.display = "block";
  canvas.style.margin = "auto";
  dropzone.appendChild(canvas);

  var reader = new FileReader();

  reader.readAsDataURL(file);

  reader.onload = function(e) {
    applyDataUrlToCanvas(this.result);
  };
}

Answer 1

您没有在任何地方指定Canvas元素的大小（至少不在此处显示的代码中）。

如果未指定画布大小，则默认为300 x 150像素。

您可以随时更新画布的大小，因此如果图像大小未知，请执行以下操作：

img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
};

使用drawImage时不指定大小将使用图像的原始大小，所以这里没有必要，因为我们知道画布将与图像一样大。

Answer 2

我在css设置中将画布宽度和heihgt设置为100％，所以：

/var/imap/imap-3

页面加载事件中的

执行技巧

使用drawImage复制到HTML画布时剪裁的图像

2 个答案: