Используйте clearRect, чтобы стереть часть изображения png, нарисованного на холсте, с помощью drawImage

Question

Можно ли использовать clearRect для удаления части изображения png, нарисованного на холсте, используя drawImage?

Я пытаюсь что-то вроде этого, и оно не работает:

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