html - 使用 clearRect 擦除使用 drawImage 绘制到画布的 png 图像的一部分

Question

是否可以使用 clearRect 删除使用 drawImage 绘制到画布上的 png 图像的一部分？

我正在尝试这样的事情，但它不起作用：

<canvas id="canvas"></canvas>
<img id="pngimg" src="" alt="" />

[...]

canvas = document.getElementById("canvas");
pngimg = document.getElementById("pngimg");

[...]

pngimg.src = canvas.toDataURL();
context.drawImage(pngimg, 0, 0, canvas.width, canvas.height);

[...]

然后使用 clearRect 用鼠标擦除。擦除适用于使用 drawLine 添加到画布的笔画，但不适用于使用 drawImage 的图像。它必须是 clearRect 而不是绘制纯色，因为背景不是纯色。是否有可能做到这一点？

Answer 1

由于您没有共享完整的代码，我不确定，但从描述来看，我怀疑这与我今天早些时候遇到的问题相同。请访问此线程。

在画布上，drawImage 与 png 与使用笔画创建绘图之间的区别？

Answer 2

你从哪里加载图像？

canvas.toDataURL()如果画布上的图像来自不同的域，则不能使用。看这里：为什么 canvas.toDataURL() 会抛出安全异常？

在相同的域情况下，这应该有效：

Original Image: <img id="pngimg" src="http://www.domain.com/image.png" /><br/>

Canvas With Clear:
<canvas width="160" height="80" id="canvas"></canvas><br/>

Altered Image:
<img id="newImg" src="" />

和脚本：

canvas = document.getElementById("canvas");
pngimg = document.getElementById("pngimg");
newImg = document.getElementById("newImg");

var context = canvas.getContext("2d");
context.drawImage(pngimg, 0, 0, canvas.width, canvas.height);
context.clearRect(125,0,35,25);

newImg.src = canvas.toDataURL("image/png");