使用画布绘制真实尺寸的图像
肯纳·萨纳克西迪斯（KJ Tsanaktsidis）
我正在尝试以1：1的比例将图像从URL加载到HTML画布中。我加载图像，并将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);
};
例如，我正在尝试绘制此图像（对大图表示抱歉：/）
但是最后
是什么原因造成的？
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Jcrop大图像真实尺寸
- 2
TypeError：使用imshow（）绘制数组时，图像数据的尺寸无效
- 3
使用回调将图像绘制到画布的Javascript
- 4
使用JCrop裁剪图像绘制到画布中
- 5
在Android / Java中使用画布在图像上绘制
- 6
使用JCrop裁剪绘制到画布中的图像
- 7
在画布中绘制方形图像
- 8
在画布上绘制完整尺寸的图像仅在Mozilla Firefox中第二次尝试有效
- 9
在画布上绘制完整尺寸的图像仅在Mozilla Firefox中进行第二次尝试有效
- 10
从画布以打印尺寸（300 DPI）导出图像
- 11
无法正确调整画布中图像的尺寸？
- 12
从画布以打印尺寸（300 DPI）导出图像
- 13
使用React.js在画布上绘制图像后无法将画布转换为图像
- 14
在屏幕上绘制后获取图像尺寸
- 15
在画布内绘制图像
- 16
画布-从原型中绘制图像
- 17
画布上的文字未绘制在图像上
- 18
html画布可以绘制上传的图像吗？
- 19
画布未绘制图像
- 20
javascript在画布上绘制图像
- 21
多个画布未绘制图像
- 22
飞镖画布未绘制图像
- 23
javascript画布不会绘制图像
- 24
在画布上绘制2点图像
- 25
图像对象裁剪并在画布中心绘制
- 26
在缩放的画布上绘制图像
- 27
图像更改时如何绘制画布
- 28
画布未绘制图像
- 29
画布未显示图像/可绘制
我来说两句