正在将图片加载到 canvas - 图片已缩放

Question

我在将图像加载到 canvas 时遇到问题 - 图像以某种方式缩放。

背景：我的网页上有几个 canvases，我想将图像加载到它们中。搭建的时候不太确定尺寸，因为尺寸要看屏幕大小

所以我创建了 div 和 canvas，使用 css 将其设置为我想要的大小并将图像打印到 canvas 上。图像会有更多的事情要做（即，如果我需要将它垂直或水平居中，则根据比例来决定），但这些在这一点上并不重要。问题是图像被渲染 "zoomed".

示例：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 放到了 https://jsfiddle.net/7zdrfe58/11/。

我正在试穿 Mac。 Safari 和 Chrome 工作相同（即缩放）。

非常感谢您的帮助！！非常感谢

Answer 1

给drawImage适当的宽度和高度。

context.drawImage(this, 0, 0 ,300 ,160);

Updated Fiddle

Answer 2

drawImage 允许您指定图像的宽度和高度。您可以像这样获得 canvas 宽度：

$("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

正在将图片加载到 canvas - 图片已缩放

Loading image into canvas - image scaled

javascript

css

canvas

drawimage