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

いくつかの考え:

  • Image の onload メソッドを使用して、イメージを使用する前にロードするのに十分な時間を与えます。
  • css を使用してキャンバスのサイズを変更する場合は、しないでください。代わりに、キャンバス要素自体のサイズを変更してください。

サンプルコードは次のとおりです。

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 に答える