KineticJs - 将图像合并到另一个图像上

Posted 2023-02-25

【中文标题】KineticJs - 将图像合并到另一个图像上

【英文标题】：KineticJs - Merging an image onto another

【发布时间】：2014-08-18 14:28:23

【问题描述】：

我想知道 Kinetic 中是否有某种方法可以将图像与较低层上的另一个图像合并，从而根据“裁剪”图像的形状创建一种裁剪效果。

因此图像必须具有透明背景，这对我来说是困难的主要来源。否则我会使用关闭拖动的蒙版......我制作了一个图表来更好地解释我想要的东西。欢迎提出任何建议。

diagram

我还快速创建了jsfiddle，我希望将图像的内容显示在 inside 框中。我觉得layer 是这条路。

【参考方案1】：

您可以使用屏幕外的 Canvas 元素加上合成来创建剪辑的图像以供 Kinetic.Image 使用。请注意，屏幕外画布可用作 Kinetic.Image 的图像源。

示例代码和演示：http://jsfiddle.net/m1erickson/ks1xxqfL/

var canvas=document.createElement('canvas');
var ctx=canvas.getContext('2d');
canvas.width=background.width;
canvas.height=background.height;
ctx.drawImage(mask,0,0,mask.width*2.25,mask.height*2.25);
ctx.globalCompositeOperation='source-in';
ctx.drawImage(background,0,0);

var support=new Kinetic.Image(
    draggable:true,
    image:canvas,
);
layer.add(support);
layer.draw();

插图

左：背景图片， 居中：用作剪贴蒙版的图像 右图：蒙版裁剪的背景（蒙版缩放了 2.25X）

【讨论】：

令人着迷。非常感谢您提供这个启发性的解决方案！