将图像加载到画布中 - 缩放图像

时间:2016-04-06 11:04:17

标签: javascript css canvas drawimage

我在将图像加载到画布时出现问题 - 图像以某种方式缩放。

背景:我的网页上有几张画布,我想在其中加载图片。在构建时,我不确定尺寸,因为尺寸取决于屏幕尺寸。

所以我创建了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的工作方式相同(即使用缩放功能)。

我非常感谢帮助!!非常感谢

2 个答案:

答案 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);

<强> https://github.com/Homebrew/homebrew-apache