5

URL から HTML キャンバスに 1:1 の縮尺で画像を読み込もうとしています。画像を読み込み、キャンバス DOM 要素を適切なサイズに設定しましたが、何らかの理由でキャンバス内の画像が大幅に拡大されたため、左上隅のみが描画されます。

これは、次の JSFiddle によって示されます: http://jsfiddle.net/KdrYr/1/

var img = new Image();
var cv = document.getElementById('thecanvas');
img.src = 'http://www.photographyblogger.net/wp-content/uploads/2009/12/Picture-in-a-picture4.jpg';
img.onload = function() {
    var ctx = cv.getContext('2d');
    cv.style.width = img.width + 'px';
    cv.style.height = img.height + 'px';
    ctx.drawImage(img, 0, 0);
};

たとえば、私はこれを描こうとしています (大きな画像については申し訳ありません:/)

期待されるイメージ

でもこれに尽きる

実際の画像

何が原因でしょうか?

4

1 に答える 1

10

スタイルではなく、キャンバスに実際の幅と高さを割り当てる必要があります。

cv.width = img.width;
cv.height = img.height;

ライブ テスト ケース。

その理由については、まあ、 ここですでに説明されています。

于 2013-10-13T12:02:55.257 に答える