我在将图像加载到画布时出现问题 - 图像以某种方式缩放。
背景:我的网页上有几张画布,我想在其中加载图片。在构建时,我不确定尺寸,因为尺寸取决于屏幕尺寸。
所以我创建了div和canvas,使用css将其设置为我想要的大小并将图像打印到画布上。还有更多与图像有关的事情(即根据比例决定,如果我需要垂直或水平居中),但这些并不重要。问题是图像被渲染为“缩放”。
示例:javascript片段在这里:
$("canvas").each(function() {
var context = $(this)[0].getContext('2d');
var img = new Image;
img.src = 'http://i67.tinypic.com/n38zdv.jpg';
$(img).load(function() {
context.drawImage(this, 0, 0);
});
//img will print 400 (correct, thats the width of the img)
//canvas will print based on the screen size (correct)
//img displayed in the canvas shows 300px out of 400px, it's zoomed (not correct)
$(this).parent().append(
'img width: '+img.width+
', canvas width: '+$(this).width());
});
我将整个示例与HTML和CSS放在this guide。
我正在尝试使用Mac。 Safari和Chrome的工作方式相同(即使用缩放功能)。
我非常感谢帮助!!非常感谢
答案 0 :(得分:1)
drawImage
可让您指定图像的宽度和高度。您可以像这样获得画布宽度:
$("canvas").each(function() {
var canvas = this;
var context = canvas.getContext('2d');
var img = new Image;
img.src = 'http://i67.tinypic.com/n38zdv.jpg';
$(img).load(function() {
context.drawImage(this, 0, 0, canvas.width, canvas.height);
});
});
点击此处查看您的工作代码:
https://jsfiddle.net/ucxdLsq9/
drawImage
签名的文档可以在这里找到:
https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage
答案 1 :(得分:0)
为drawImage
提供适当的宽度和高度。
context.drawImage(this, 0, 0 ,300 ,160);