-1

Is it possible to easily replicate the "put your face in this photo and share it with your friends" functionality (as seen on many sites, eg. this one) using only HTML5 and/or JavaScript?

Every other site I've seen doing this uses Flash, but it would be good to get it running across all mobile devices.

I've taken a look at Konva (the successor to KinectJS) but I'm still not entirely sure this can be done using only HTML and JS.

4

2 回答 2

3

Use fabric.js to do that, your example is fabric.

here is of your solution :) - 15 min coding 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 "/>

Here: base 64 transformed image (check fiddle)

declare fabric canvas:

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

canvas.add(setBgImg());

set image with missing face:

function setBgImg()
{
    var imgElement = document.getElementById('bgImg')
    return fabricImg = new fabric.Image(
                imgElement, {
                    selectable: !1,
                    evented: !1,
                    hasControls: !1,
                    hasBorders: !1
                });
}
于 2015-05-26T15:21:01.963 回答
0

Yes this is possible. It's simply combining two images and using saturation/brightness/hue/scale operations on one of them. A viable way would be to use a HTML canvas for this.

于 2015-05-26T14:47:17.040 回答