js + html5圖像處理

我需要做一個圖像處理，在服務器端解決（現在用GD）。js + html5圖像處理

基本上，它包括上： - 甲背景 - 甲圖片 - 掩模（黑/白）與形狀以除去圖片的一部分 - 一個新的圖像，覆蓋

之前除去部分

這些圖像是爲此目的而創建的，因此它們具有正確的透明png，...

我需要分析以及是否有可能在客戶端使用js + html5執行此過程。我一直在探索一些使用canvas的圖書館（fabricjs，jcanvas），但我還沒有找到明確的方法去做。

我甚至不確定這種工作是否可以在客戶端完成。

我將能夠澄清這一點，如果是的話...一些想法...

由於提前， ·_-

編輯：

我一直跟隨像素處理教程，但我無法獲得適當的操作來實現目標。我在嘗試：

var background = new Image(); 
background.src = "assets/imgs/bg1_3PSC1PDZZZZZZZZZ_ZZZZZZZZ_ZZZZZZZZ_005.jpg"; 
var scooter = new Image(); 
scooter.src = "assets/imgs/3PSC1PD2TB01A010_ZZZZZZZZ_0PAL0RFC_005_01.png"; 
var mask = new Image(); 
mask.src = "assets/imgs/DE_RJGC_3PSC1PDZZZ01ZZ10_ZZZZZZZZ_ZZZZZZZZ_005_10.png"; 
var newElt = new Image(); 
newElt.src = "assets/imgs/RJGC_3PSC1PDZZZ01ZZ10_ZZZZZZZZ_ZZZZZZZZ_005_10.png"; 

$(background).load(function() { 
    ctx.drawImage(background, 0, 0); 
}); 

$(scooter).load(function() { 
    ctx.drawImage(scooter, 0, 500); 
}); 

$(mask).load(function() { 
    ctx.drawImage(mask, 0, 1175); 
}); 

$(newElt).load(function() { 
    ctx.drawImage(newElt, 0, 1850); 
}); 

$('#composite').click(function(){ 
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 

var bgData  = ctx.getImageData(0, 0, 1200, 500); 
var pixBackground = bgData.data; 
var scooterData = ctx.getImageData(0, 500, 1200, 675); 
var pixScooter = scooterData.data; 
var maskData = ctx.getImageData(0, 1175, 1200, 675); 
var pixMask  = maskData.data; 
var newEltData = ctx.getImageData(0, 1850, 1200, 675); 
var pixNewElt = newEltData.data; 

var numPixels = scooterData.width * scooterData.height; 

// remove a part of the picture thanks to the mask 
// --> do the job  
for (var i=0; i < numPixels; i++) { 
    pixScooter[i*4+3] = (255 - pixMask[i*4+3]) * pixScooter[i*4+3]; 
} 

// add the new picture that cover the removed part before 
// --> horrible effect and not really well covered 
for (var i=0; i < numPixels; i++) { 
    pixScooter[i*4] += pixNewElt[i*4]; 
    pixScooter[i*4+1] += pixNewElt[i*4+1]; 
    pixScooter[i*4+2] += pixNewElt[i*4+2]; 
    pixScooter[i*4+3] += pixNewElt[i*4+3]; 
} 


ctx.putImageData(scooterData, 0, 2525); 
});

我試過不同的組合......任何神奇的想法？

在此先感謝這裏一看， ·_-

編輯II

我已經改變了戰略和移動與globalCompositionOperation玩，玩了一會兒感謝http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/我實現與：

$(document).ready(function() { 
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 

var bg = loadImage('/path/to/image/bg.jpg', main); 
var sup = loadImage('/path/to/image/sup.png', main); 
var sco = loadImage('/path/to/image/sco.png', main); 
var sust = loadImage('/path/to/image/sust.png', main); 

var imagesLoaded = 0; 
function main() { 
imagesLoaded += 1; 

if(imagesLoaded == 3) { 
ctx.globalAlpha = 1; 

ctx.drawImage(bg, 0, 0); 
ctx.globalCompositeOperation = 'destination-out'; 
ctx.drawImage(sup, 0, 0); 

ctx.globalCompositeOperation = 'source-in'; 
ctx.drawImage(sco, 0, 0); 

ctx.globalCompositeOperation = 'source-over'; 
ctx.drawImage(sust, 0, 0); 

ctx.globalCompositeOperation = 'destination-atop'; 
ctx.drawImage(bg, 0, 0); 

} 
} 

function loadImage(src, onload) { 
// http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called 
var img = new Image(); 

img.onload = onload; 
img.src = src; 

return img; 
} 
});

來源

2013-11-22 manou

有一個相當詳細的使用畫布來做客戶端編輯的例子http://net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-pixel-manipulation/ canvas是唯一的API具有像素級編輯。其他方法是疊加圖像以產生混淆，IE將彩色圖像的頂部的黑白圖像淡化僅用於外觀。 – Wayne

這個嘟嘟聲聽起來不錯...謝謝 – manou