相关疑难解决方法(0)

我想从现有图像中获取不规则形状的部分,并使用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 = …