[英]Complex image manipulation using HTML5/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.