簡體   English   中英

使用HTML5 / JS進行復雜的圖像處理

[英]Complex image manipulation using HTML5/JS

是否可以很容易地復制“把你的臉在這張照片,並與朋友分享”功能(如在很多網站看到,例如, 這一個只使用HTML5和/或JavaScript)?

我見過的每個其他網站都使用Flash,但是最好在所有移動設備上運行它。

我看過KonvaKinectJS的后繼產品),但我仍然不確定是否可以僅使用HTML和JS來完成此操作。

使用fabric.js來做到這一點,您的示例就是fabric。

這是您的解決方案:)-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轉換的圖像(檢查小提琴)

申報面料帆布:

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

是的,這是可能的。 它只是將兩個圖像組合在一起,並對其中之一使用飽和度/亮度/色相/縮放操作。 一種可行的方法是為此使用HTML畫布。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM