Javascript Canvas 如何从图像中删除形状或区域？

Question

不知道我做错了什么，但它似乎不起作用。我想通过位置而不是颜色从图像中删除形状或符号。

function crop(leftedge, topedge, wd, ht) {
  const imageData = context.getImageData(leftedge, topedge, wd, ht);
  const canvas1 = document.createElement("canvas");
  const ctx1 = canvas1.getContext('2d');
  canvas1.width = wd, canvas1.height = ht;

  ctx1.clearRect(0, 0, 50, 50);

  ctx1.putImageData(imageData, 0, 0);
  return canvas1;
}

由于某种原因，clearRect 似乎没有做任何事情。不确定还有什么其他方法或者我是否做错了。我也尝试了 fillRect 但没有结果...图像显示没有任何变化。

Answer 1

发生这种情况是因为您的操作顺序很重要。就像现在一样，您需要先清除那个 50 像素的小方 block ，然后再用新的 imageData 覆盖它。试试这个:

function crop(leftedge, topedge, wd, ht) {
  const imageData = context.getImageData(leftedge, topedge, wd, ht);
  const canvas1 = document.createElement("canvas");
  const ctx1 = canvas1.getContext('2d');
  canvas1.width = wd, canvas1.height = ht;

  ctx1.putImageData(imageData, 0, 0);
  ctx1.clearRect(0, 0, 50, 50);

  return canvas1;
}