为什么 canvas 的 drawImage 缩放比例不一致？

Question

我正在将图像渲染到 canvas。读取 drawImage MDN API 后，看起来下面两行代码应该产生相同的结果：

var ctx = canvas.getContext('2d');
ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height, 0, 0, this.clip.width, this.clip.height);
ctx.drawImage(this.image,                                            0, 0, this.clip.width, this.clip.height);

但他们没有！我不知道为什么。第一个缩放图像以填满 this.clip，这是我所期望的。但是第二个似乎并没有缩放到 this.clip 是什么，而且图像似乎超出了它自己的范围。

现在，这是我在 javascript 中生成的图像，那么有什么方法可以让我搞砸图像创建，从而发生这种情况吗？

如果有帮助的话。下面是我用来制作图像的代码。

this.image = new Image(this.getSize()[0],this.getSize()[1]);
//this.getSize() = [32, 42, 40];
var c = document.createElement('canvas');
var ctx = c.getContext('2d');
var pixels = ctx.createImageData(this.image.width, this.image.height);
for (var x = 0; x < this.image.width; x++) {
     for (var y = 0; y < this.image.height; y++) {
         var i = (x + y*this.image.width)*4;
         var color = scalarToHue(this.sample(x,y,layer),0,10,50);
         pixels.data[i] = Math.round(color[0]*255);
         pixels.data[i + 1] = Math.round(color[1]*255);
         pixels.data[i + 2] = Math.round(color[2]*255);
         pixels.data[i + 3] = 255;
     }
}
ctx.putImageData(pixels, 0, 0);
this.image.src = c.toDataURL("image.png");

此外，我正在使用 chrome。

Answer 1

这是因为您通过在 Image(width, height) 构造函数中设置来硬编码 image 的宽度和高度属性。

ctx.drawImage(img, dx, dy [, dwidth ,dheight]) 将使 swidth 和 sheight 默认为您图像的 naturalWidth 和 naturalHeight，而不是它们的 width 和 height 个。

所以在您的代码中，这意味着第一行将使用 32 和 42 作为宽度和高度的值，而如果我没看错您的代码，第二行将使用 300 和 150。

Ps：重新阅读你的代码，似乎你想要的只是在绘制之前将你的canvas的宽度和高度设置为这些值，然后你就可以了需要 drawImage(x, y) 版本。

为什么 canvas 的 drawImage 缩放比例不一致？

Why does canvas's drawImage scale inconsistently?

javascript

scaling

canvas

image