我正在尝试以 1:1 的比例将图像从 URL 加载到 HTML Canvas 中。我加载图像,并将 Canvas DOM 元素设置为适当的尺寸,但由于某种原因, Canvas 中的图像被显着放大,因此只绘制了左上角。
以下 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);
};
例如,我正在尝试绘制这个(对大图感到抱歉:/)
但以这个结束
这可能是什么原因造成的?
最佳答案
您需要分配 Canvas 的实际宽度和高度,而不是通过其样式:
cv.width = img.width;
cv.height = img.height;
Live test case .
至于为什么,已经解释过了here .
关于javascript - 使用 Canvas 以真实大小绘制图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19344930/