Сложная обработка изображений с использованием HTML5/JS

Question

Можно ли легко воспроизвести функциональность «поместите свое лицо в эту фотографию и поделиться ею с друзьями» (как видно на многих сайтах, например, 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 преобразованное изображение (проверьте скрипку)

DECLARE ткани холст:

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-холст для этого.