Complex image manipulation using HTML5/JS

Question

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.

I'm certain it can be done using HTML / CSS. Layer a image with a transparent "hole" over a photo of the person't face... — Cerbrus, May 26 '15 at 14:41

score 3 · Accepted Answer · answered May 26 '15 at 15:21

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

answered May 26 '15 at 15:21

SilentTremor

4,747
2
21
34

Wow. Thanks so much! Never used Fabric before. I'll send you some rep when the site lets me as a way of thanks. – Chuck Le Butt May 26 '15 at 15:24
with pleasure and have fun – SilentTremor May 26 '15 at 15:25
1

@Chuck Thanks mister, din't expect that. – SilentTremor Jun 22 '15 at 08:30
Thank you. Exactly what I was searching. Cheers. – Radovan Skendzic Feb 10 '17 at 12:39

score 0 · Answer 2 · answered May 26 '15 at 14:47

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.

answered May 26 '15 at 14:47

René Roth

1,979
1
18
25

Complex image manipulation using HTML5/JS

2 Answers2