Javascript 使用HTML5/JS进行复杂图像处理

是否可以仅使用HTML5和/或JavaScript轻松复制“将你的脸放在这张照片中并与朋友共享”功能（如在许多网站上看到的）

我见过的所有其他网站都使用Flash，但最好能让它在所有移动设备上运行

---

我已经看过了（KinectJS的后继者），但我仍然不能完全确定仅使用HTML和JS就可以做到这一点。

是的，这是可能的。它只是简单地组合两幅图像，并对其中一幅图像使用饱和度/亮度/色调/缩放操作。一种可行的方法是使用HTML画布来实现这一点。

使用fabric.js来实现这一点，您的示例是fabric

以下是您的解决方案：）-15分钟编码

设置缺少面的图像：

function setBgImg()
{
    var imgElement = document.getElementById('bgImg')
    return fabricImg = new fabric.Image(
                imgElement, {
                    selectable: !1,
                    evented: !1,
                    hasControls: !1,
                    hasBorders: !1
                });
}

---

我确信它可以用HTML/CSS来完成。用透明的“洞”在人的脸的照片上分层…哇。非常感谢！以前从未使用过布料。当网站允许我的时候，我会给你发送一些代表，作为一种感谢的方式。非常高兴，祝你好运fun@Chuck谢谢，先生，别指望了，谢谢。正是我在寻找的。干杯

var canvas = new fabric.Canvas('imageCanvas', {
    backgroundColor: 'rgb(240,240,240)'
});
canvas.setWidth(300);
canvas.setHeight(300);

canvas.add(setBgImg());

function setBgImg()
{
    var imgElement = document.getElementById('bgImg')
    return fabricImg = new fabric.Image(
                imgElement, {
                    selectable: !1,
                    evented: !1,
                    hasControls: !1,
                    hasBorders: !1
                });
}