Маска для putImageData с холстом HTML5?

Question

Я хочу взять фрагмент неправильной формы из существующего изображения и отобразить его как новое изображение в Javascript, используя холсты HTML5. Таким образом, будут скопированы только данные внутри границы многоугольника. Подход, который я придумал, включал:

1. Нарисуйте многоугольник на новом холсте.
2. Создать маску, используя clip
3. Скопируйте данные с оригинального холста, используя getImageData (прямоугольник)
4. Применить данные к новому холсту, используя putImageData

Это не сработало, весь прямоугольник (например, материал из источника за пределами границы) все еще появляется. Этот вопрос объясняет, почему: «В спецификации сказано, что putImageData не будет затронут отсечкой регионов». Dang!

Я также попытался нарисовать фигуру, установив context.globalCompositeOperation = "source-in", а затем используя putImageData. Результат тот же: маска не применяется. Я подозреваю, что по той же причине.

Любые предложения о том, как достичь этой цели? Вот основной код моей работы, на случай, если неясно, что я пытаюсь сделать. .

 // coords is the polygon data for the area I want
   context = $('canvas')[0].getContext("2d");
   context.save();
   context.beginPath();
   context.moveTo(coords[0], coords[1]);
   for (i = 2; i < coords.length; i += 2) {
     context.lineTo(coords[i], coords[i + 1]);
   }
   //context.closePath();
   context.clip();

   $img = $('#main_image');
   copy_canvas = new_canvas($img); // just creates a new canvas matching dimensions of image
   copy_ctx = copy.getContext("2d");

   tempImage = new Image();
   tempImage.src = $img.attr("src");
   copy_ctx.drawImage(tempImage,0,0,tempImage.width,tempImage.height);

  // returns array x,y,x,y with t/l and b/r corners for a polygon
  corners = get_corners(coords)
  var data = copy_ctx.getImageData(corners[0],corners[1],corners[2],corners[3]);
  //context.globalCompositeOperation = "source-in";
  context.putImageData(data,0,0);
  context.restore();

Answer 1

не используйте putImageData,

, просто добавьте в холст памяти с document.createElement, чтобы создать маску и применить ее с помощью drawImage() и globalCompositeOperation функции.(в зависимости от порядка вам нужно выбрать правильный режим;

Я делаю что-то подобное здесь Код здесь (обратите внимание на функцию CasparKleijne.Canvas.GFX.Composite)