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

你从哪里加载图片？

如果画布上的图像来自不同的域，则无法使用canvas.toDataURL()。见这里：Why does canvas.toDataURL() throw a security exception?

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

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");

Answer 2

由于你还没有分享完整的代码，我不确定，但从描述中我怀疑这是我今天早些时候遇到的同一个问题。请访问此主题。

On a canvas, difference between drawImage with png vs create a drawing using strokes?

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

2 个答案: