我想从现有图像中截取不规则形状的部分，并使用 HTML5 Canvas 在 Javascript 中将其渲染为新图像。因此，只会复制多边形边界内的数据。我提出的方法涉及:
- 在新 Canvas 中绘制多边形。
- 使用
clip创建 mask - 使用
getImageData(矩形)从原始 Canvas 复制数据 - 使用
putImageData将数据应用到新 Canvas
它没有用，整个矩形(例如来自边界外源的东西)仍然出现。 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();
最佳答案
不要使用putImageData,
只需使用 document.createElement 创建一个额外的内存 Canvas 来创建 mask 并使用 drawImage() 和 globalCompositeOperation 应用它功能(根据您需要选择正确模式的顺序；
我愿意something similar here code is here (注意 CasparKleijne.Canvas.GFX.Composite 函数)
关于javascript - 带有 HTML5 Canvas 的 putImageData 的掩码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5942141/