キャンバスに画像を読み込む - 画像のサイズを変更しました

Question

キャンバスに画像を読み込む際に問題があります。画像は何らかの縮尺で表示されます。

背景：私は自分のWebページにいくつかのキャンバスを持っており、イメージをそれらに読み込みたいと思っています。構築するとき、サイズは画面のサイズに依存するので、私は次元については分かりません。

私はdivとキャンバスを作成して、それを必要なサイズにしてキャンバスにイメージを印刷するためにCSSを使用します。イメージに関連する作業が増えます（縦または横にセンタリングする必要がある場合は比に基づいて決定されます）が、現時点ではそれほど重要ではありません。問題は、画像が「ズーム」されてレンダリングされることです。

例：javascriptの作品はここにある：

$("canvas").each(function() { 
    var context = $(this)[0].getContext('2d'); 
    var img = new Image; 

    img.src = 'http://i67.tinypic.com/n38zdv.jpg'; 

    $(img).load(function() { 
    context.drawImage(this, 0, 0); 
    }); 

//img will print 400 (correct, thats the width of the img) 
//canvas will print based on the screen size (correct) 
//img displayed in the canvas shows 300px out of 400px, it's zoomed (not correct) 
    $(this).parent().append(
    'img width: '+img.width+ 
    ', canvas width: '+$(this).width()); 
}); 

私はhttps://jsfiddle.net/7zdrfe58/11/にHTMLとCSSで全体の例を置きます。

私はMacで試しています。 SafariとChromeは同じように機能します（つまり、ズーム付き）。

私は非常に助けてくれてありがとう！おかげで多く

Answer 1

drawImageあなたがイメージの幅と高さを指定することができます。あなたはそのようにキャンバスの幅を取得することができます：

$("canvas").each(function() { 
    var canvas = this; 
    var context = canvas.getContext('2d'); 
    var img = new Image; 
    img.src = 'http://i67.tinypic.com/n38zdv.jpg'; 

    $(img).load(function() { 
    context.drawImage(this, 0, 0, canvas.width, canvas.height); 
    }); 
}); 

ここにあなたの作業コードをチェックアウト：

https://jsfiddle.net/ucxdLsq9/

をdrawImage署名のドキュメントはここで見つけることができます：

https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage

Answer 2

適切な幅と高さをdrawImageに与えます。

context.drawImage(this, 0, 0 ,300 ,160); 

Updated Fiddle