HTML5如何添加图片遮罩,带有HTML5画布的putImageData的遮罩？

我想从现有的图像中采取不规则形状的部分，并使用HTML5画布将其呈现为Javascript中的新图像。因此，只有多边形边界内的数据才会被复制。我提出的方法包括：带有HTML5画布的putImageData的遮罩？

在新画布中绘制多边形。

创建使用getImageData(矩形)

应用数据到新的画布使用从原来的帆布clip

将数据复制使用putImageData

口罩它没有工作，整个矩形(例如来自边界外的来源的东西)仍然出现。 This question解释了原因： “规范说明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();