Question

我正在将图像渲染到画布上。在阅读了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构造函数中设置Image(width, height)的宽度和高度属性来对其进行硬编码。

ctx.drawImage(img, dx, dy [, dwidth ,dheight])会将swidth和sheight默认为您的图片的naturalWidth和naturalHeight，而不是width和height }那些。

所以在你的代码中，这意味着第一行将使用32和42作为swidth和sheight的值，而第二行将使用300和150，如果我正确读取你的代码。

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

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

1 个答案: