的JavaScript的drawImage高度不正確

Question

我有這個圖片Image Link，我希望把這種形象到畫布 但結果高度和寬度都沒有準確 這是我的腳本

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
var img = document.createElement('IMG'); 
img.src = "https://s13.postimg.org/rmk2wq6uf/depan.jpg"; 
ctx.drawImage(img, 0, 0); 

jsfiddle link 請幫助

Answer 1

您可以使用naturalWidth和naturalHeight設置canvas的高度和寬度：

https://jsfiddle.net/ryanpcmcquen/wbxnkuq4/

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 
var img = document.createElement('img'); 
 
img.src = "https://s13.postimg.org/rmk2wq6uf/depan.jpg"; 
 
canvas.width = img.naturalWidth; 
 
canvas.height = img.naturalHeight; 
 
ctx.drawImage(img, 0, 0);

<canvas id="canvas"></canvas>

MDN： https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement

Answer 2

ctx.drawImage(img, 0, 0, img.width, img.height, 
        0, 0, canvas.width, canvas.height); 

https://jsfiddle.net/Im_Saajan/ekw9n3et/2/

檢查此的jsfiddle