javascript - 为什么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 作为 swidth 和 sheight 的值，而如果我没看错您的代码，第二行将使用 300 和 150。

Ps:重新阅读你的代码，似乎你想要的只是在绘制之前将你的 Canvas 的宽度和高度设置为这些值，那么你只需要 drawImage(x, y) 版本。