使用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

你要從哪裏加載圖片？如果畫布上的圖像來自不同的域，則不能使用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?