0

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

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 ）。

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

我正在使用 Chrome，但它在 Firefox 中显示相同。

提前致谢。

4

1 回答 1

1

Several thoughts:

  • Use Image's onload method to give the image enough time to load before using it.
  • If you're resizing the canvas with css--DON'T. Instead resize the canvas element itself.

Here's some sample code:

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;
于 2013-10-19T21:50:22.483 回答