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 пикселей до , перезаписывая его новыми 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;
}