Question

是否可以轻松复制＆＃34;将您的脸放在这张照片中并与朋友分享＃34;功能（如许多网站上所见，例如。this one）仅使用HTML5和/或JavaScript？

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

我已经看过Konva（KinectJS的继任者），但我还不完全确定只能使用HTML和JS来完成。

Answer 1

使用fabric.js来做到这一点，你的例子是结构。

这是你的解决方案:) - 15分钟编码 http://jsfiddle.net/d9a9n5h7/

<div id="container">
    <input type="file" id="imageLoader" name="imageLoader" />
    <canvas id="imageCanvas" width="300" height="300"></canvas> 
    <a id="imageSaver" href="#">Save image</a>
</div>
<img id="bgImg" scr="base 64 "/>

下面：基础64变换图像（检查小提琴）

声明布料画布：

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
                });
}

Answer 2

是的，这是可能的。它只是将两个图像组合在一起并在其中一个上使用饱和度/亮度/色调/缩放操作。一种可行的方法是使用HTML画布。

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

2 个答案: