使用鼠标剪裁和插入不规则形状的图像

Question

我已经裁剪了一个不规则形状的图像。我需要将图像插入裁剪的部分。我已经使用HTML5和JavaScript（kinetic.js）来执行此操作（请参阅：http://imgur.com/Lyt3j）。我已经完成了区域绘图。我不想要像rect，poly等形状。我需要一个用户定义的形状，并且应该使用鼠标进行裁剪。

任何人都可以帮助我吗？

Answer 1

看看2d上下文的compositing settings。这些允许您使用路径或图像在画布上执行遮罩。当您使用上面创建的路径和context.globalCompositeOperation = 'destination-in'时，路径将不会绘制，并且只有路径内部覆盖的图像部分将保留。其余的将是透明的。当您使用'source-out'操作时，您会在画出路径的画布上创建一个透明的“孔”。

所以当你有一个带有源图像（你想插入的图像）的画布，一个带有目标图像（你想插入另一个图像的图像）和路径的画布时，做到这一点。

a）你用source-in绘制源画布的路径，所以你有一个正确的形状在它的图形。然后，将复合操作设置回source-over，然后将源画布设置为目标画布上的drawImage。这会裁剪源画布上的图像，因此请确保在您仍然需要时预先创建副本。

b）中绘制的路径到目标图像与destination-out抹去由所述路径包围的区域中，源图像设置的复合操作来destination-atop然后drawImage到目标图像，则其将被插入的“后面”目的地的透明部分。这个变体对于源画布是非破坏性的。请记住，完成后将globalCompositeOperation设置回source-over，否则其他画布操作可能不再执行您期望的操作。

c）就像在b）中使用destination-out在目标画布上切出一个洞，但是然后将复合操作设置为正常设置source-over并将目标绘制到源上。您现在已经在源画布上显示完整的图像。