使用 drawImage 将图像复制到 HTML 画布时被剪切的图像答案

【问题标题】：Image being clipped when copied to HTML canvas using drawImage使用 drawImage 将图像复制到 HTML 画布时被剪切的图像
【发布时间】：2013-07-19 19:07:49
【问题描述】：

我正在编写一个小的 sn-p，它允许用户将图像拖到 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);
  };
}

【问题讨论】：

标签： javascript canvas

【解决方案1】：

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

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

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

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

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

【讨论】：

天啊！！！我假设 style.width 和 style.height 与 .width 和 .height 是一回事！非常感谢您的帮助！
@RajivNair 不，您不能为此使用 CSS 样式，因为 CSS 仅缩放内容（就像图像一样）。如果有帮助，请记得投票/接受答案。
刚刚遇到同样的问题。没有意识到您必须明确设置画布的大小。这个答案应该被接受。

【解决方案2】：

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

canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

在页面加载事件中解决问题

【讨论】：