Question

我有这个代码（从网上偷来的）：

function readIt() {
  var reader = new FileReader();
    reader.onload = (function(e) {
      var img = new Image();
      img.src = e.target.result;
      var c = document.getElementById("canvas");
      var ctx = c.getContext("2d");
      ctx.drawImage(img, 0, 0);
    }
  );
  reader.readAsDataURL(document.getElementById('userImage').files[0]);
}

这一点起作用。画布的宽度和高度设置为图像的大小，但只显示图像的左上角 - 它似乎被拉伸，因此它适合分配给画布的所有空间（足以显示整个图像 - 615px x 615px ）。

如果我添加＆lt; img＆gt;元素大小与画布大小相同，并将src指向文件系统中的图像，看起来很完美。

我正在使用Chrome，但它在Firefox中看起来是一样的。

提前致谢。

Answer 1

几点想法：

使用Image的onload方法为图像提供足够的时间来加载它。
如果你用css调整画布大小 - 不要。而是调整canvas元素本身的大小。

以下是一些示例代码：

var img=new Image();
img.onload=function(){

    var c=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // resize the canvas element to the same size as the image
    // DON'T RESIZE WITH CSS -- your results will appear stretched
    c.width=img.width;
    c.height=img.height;

    // draw the image onto the canvas
    ctx.drawImage(img,0,0);

}
img.src=e.target.result;

在Canvas上绘制图像可以拉伸图像吗？

1 个答案: