$.fn.imageCanvas = function() {
if (!document.getElementById('bgCanvas')){
$('body').append($('<canvas>',{id:'bgCanvas', width:'500px', height: '500px'}))
var canvas = document.getElementById('bgCanvas');
var ctx = canvas.getContext('2d');
}
var img = new Image();
img.onload = function() {
ctx.drawImage(img,0,0,438,300);
console.log(this.width);
console.log(this.height);
}
img.src= 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
}
在 ctx.drawImage 中我写了 x,y,width,height。但是 Canvas 拉伸(stretch)了这个图像。 如何使用原始宽度/高度进行成像
最佳答案
如果您只想显示图像而不缩放,请使用 three-argument variant drawImage
的 x 和 y:
ctx.drawImage(img,0,0);
如果您想将底部和右侧边缘裁剪到您指定的尺寸,请使用 nine-argument variant :
ctx.drawImage(img,0,0,362,240,0,0,362,240);
前四个数字设置剪切矩形的 x/y 和宽度/高度,接下来的四个数字设置绘制到 Canvas 的剪切图像矩形的 x/y 和宽度/高度。
编辑:
问题在于 jQuery 函数将第二个参数中选项对象中的 width
和 height
属性视为 CSS 属性,< em>not 作为 DOM 对象属性。如果您检查生成的 HTML,您会发现:
<canvas id="bgCanvas" style="width: 500px; height: 500px;"></canvas>
而不是你想要的,应该是:
<canvas id="bgCanvas" width="500" height="500"></canvas>
参见 this question讨论这个问题。作为解决方案,我建议改用:
$('body').append($('<canvas>',{id:"bgCanvas"}).attr({'width':500,'height':500}))
关于javascript Canvas 拉伸(stretch)我的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13255413/