js+html5图像处理

Question

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

基本上，它包括：-背景-图片-蒙版(黑色/白色)与形状，以删除一部分的图片-一个新的图片覆盖之前删除的部分

这些图像就是为了这个目的而创建的，所以它们有正确的透明png，.

如果可以使用js+html5在客户端完成此过程，我还需要进行分析。我一直在探索一些使用画布工作的库(fabricjs，j画布)，但我还没有找到明确的方法。

我甚至不确定这种工作是否可以在客户端完成。

我希望你能澄清这一点，如果是这样的话.一些想法..。

谢谢你，.-

编辑：

我一直在遵循像素处理教程，但我无法得到适当的操作，以实现目标。我想做的是：

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

Answer 1

只要快速搜索就能看到一些很有前途的图书馆。例如：

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

http://camanjs.com/

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

Answer 2

HTML5上的画布是非常好的东西:您可以在它上加载一个图像，并按您的意愿播放像素。我编写了这篇文章，建议如何使用图像减法来测量车辆的速度。这篇文章和代码是用葡萄牙语写的，但也许你可以理解一般的原则。

建议:文件协议不允许处理图像，因此需要将代码发布到need服务器。