使用畫布以真實尺寸繪製圖像

我試圖從URL加載圖像到1：1比例的HTML畫布中。我加載圖像，並將畫布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); 
};

例如，我想得出這樣的（很抱歉的大圖：/）

Expected Image

但結束up with this

Actual image

這可能是什麼原因造成的？

來源

2013-10-13 KJ Tsanaktsidis

您需要分配畫布實際寬度和高度，而不是通過它的風格：

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

Live test case。

至於爲什麼，好吧，已經說明了here。

來源

2013-10-13 12:02:55

很快的男人！絕對正確，在我真正的代碼中，我使用jQuery $（）。width（）和height（）來設置樣式。你可以獲得積分，因爲你鏈接的頁面解釋了我可以如何將畫布後臺存儲的大小與實際顯示的內容分開，從而避免了編寫大量難看的轉換代碼來處理大小調整。謝謝一堆！ –

乾杯@KJTsanaktsidis - 幸運的是，不久前我偶然發現了這個問題，所以它還是新鮮的。（是的，也是jQuery！:)） –

更新：'width（）'和'height（）'函數[在jQuery 3.0中有點不同]（https://jquery.com/upgrade-guide/3.0/ ＃破變化寬度高度CSS-QUOT寬度QUOT和 - CSS-QUOT-高度QUOT燦返回非整數值）。 – jkdev

使用畫布以真實尺寸繪製圖像

回答

相關問題