0

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

2 回答 2

7

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

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

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

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

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

于 2013-07-20T16:16:13.073 回答
0

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

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

在页面加载事件中做的伎俩

于 2015-08-01T10:14:50.103 回答