使用 HTML5 画布的 putImageData 掩码？

Question

我想从现有图像中获取不规则形状的部分，并使用 HTML5 画布将其渲染为 Javascript 中的新图像。因此，只会复制多边形边界内的数据。我想出的方法涉及：

1. 在新画布中绘制多边形。
2. 使用 clip 创建遮罩 使用
3. getImageData 从原始画布复制数据（一个矩形）
4. 使用 putImageData 将数据应用到新画布

它没有不起作用，整个矩形（例如来自边界之外的源的内容）仍然出现。 这个问题解释了原因： “规范规定 putImageData 不会受到剪切区域的影响。”当当！

我还尝试绘制形状，设置 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 函数）