javascript - js+html5图像处理

Question

我需要做一个图像处理，在服务器端解决(现在用 GD)。

基本上，它包括: - 背景 - 照片 - 一个面具(黑色/白色)，其形状可以去除图片的一部分 - 一张新图片覆盖之前删除的部分

这些图像是为此目的创建的，因此它们具有正确的透明 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);
});

我尝试了不同的组合……有什么神奇的想法吗？

在此先感谢您的光临，·_-

编辑二

我已经改变策略并开始使用 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;
}
});

Answer 1

只需快速搜索一下，就会发现一些很有前途的库。例如:

http://developers.aviary.com/docs/web

http://camanjs.com/

http://www.pixastic.com/editor-test/