Javascript 帆布不'；从sprite图像中提取图像时不能正确绘制边缘

我尝试使用ctx.drawImage（image、sx、sy、sWidth、sHeight、dx、dy、dWidth、dHeight）；API从精灵图像中提取图像。但是我发现Canvas从相邻的图像中渲染了我不想要的边缘

例如：

首先，我使用800x400画布绘制400x400红色矩形，并在红色矩形之后绘制400x200绿色矩形，然后将数据保存到JPG文件

然后我想提取green rect以绘制到另一个画布上，因此我使用如下语法：

ctx.drawImage(this, 400, 0, 400, 400, 0, 0, 400, 400);

理论上，画布上只有来自绿色矩形的颜色数据，但左边缘有红色

有人知道导致此问题的原因吗？我是否误解了API

---

提前感谢。

这是因为jpeg压缩。 您可能确实将

toDataURL（'image/jpeg'，quality）

的质量参数设置为最大值和默认值

1

[编辑：实际上，正如OP所发现的，默认值是

.92

] 通过这样做，jpeg算法将需要更大的像素块来进行有损压缩。您可以看到，在图像上，两个矩形发生碰撞的地方，存在一些抗锯齿瑕疵

压缩越低，这些伪影越大：

//您的原始画布
var canvas=document.createElement（'canvas'）；
var_ctx=canvas.getContext（'2d'）；
画布宽度=800；
画布高度=400；
_ctx.fillStyle='白色'；
_ctx.fillRect（0,080400）；
_ctx.fillStyle='红色'；
_ctx.fillRect（0,040400）；
_ctx.fillStyle='绿色'；
_ctx.fillRect（400100400200）；
var img=document.createElement（'img'）；
img.onload=函数（）{
//让我们放大一点
drawImage（这个，300，0，300，300，0，0，400，400）；
}
var ctx=document.getElementById（'output'）.getContext（'2d'）；
//因为我们确实要缩放图像，所以让我们尝试将抗锯齿保持为最小值
ctx.webkitImageSmoothingEnabled=
ctx.mozImageSmoothingEnabled=
ctx.msImageSmoothInEnabled=
ctx.imageSmoothingEnabled=假；
range.oninput=函数（）{
img.src=canvas.toDataURL（'image/jpeg'，+this.value）；
}
range.oninput（）
JPEG质量：

不知道api有，但您在使用drawImage时尝试从1开始，而不是从0开始？感谢您的详细解释。我很感激！顺便说一下，我刚刚检查了toDataURL的默认质量参数，我发现一篇文章说默认值是0.92@山姆，你完全正确，我忘了，真丢脸。。。没有更新。