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

Question

是否可以仅使用 HTML5 and/or JavaScript 轻松复制 "put your face in this photo and share it with your friends" 功能（如在许多网站上看到的那样，例如 this one）？

我见过的所有这样做的其他网站都使用 Flash，但最好在所有移动设备上安装它运行。

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

Answer 1

是的，这是可能的。它只是组合两张图像并对其中一张使用 saturation/brightness/hue/scale 操作。一种可行的方法是为此使用 HTML canvas。

Answer 2

使用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 "/>

这里： base 64 转换图像（检查 fiddle）

声明织物 canvas:

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

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

Complex image manipulation using HTML5/JS

html

javascript

canvas

konvajs