Javascript js+；html5图像处理

我需要做一个图像处理，在服务器端解决（目前使用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);
});

---

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

---

HTML5上的画布真的很好：你可以在上面加载一个图像，并按照你的意愿播放像素。我曾经写过一篇文章，建议人们如何应用图像减法来测量车辆的速度。这篇文章和代码是葡萄牙语的，但也许你能理解一般原则

---

建议：文件协议不允许使用图像，因此您需要将代码发布到Web服务器。

这里有一个使用canvas进行客户端编辑的相当详细的示例canvas是唯一具有像素级编辑的API。另一种方法是叠加图像以创建一个明暗度，即将黑白图像淡入彩色图像的顶部，仅用于外观。。。感谢您提供更多的参考资料，但由于我一直在探索面料和jcanvas，我无法找到一种明确的方法来满足我的需求。。。。它启发了我。。。是的；）谢谢，我将尝试用像素做一些数学…`:-/:太棒了！这会很有趣，但记住图书馆，它们会为你节省很多时间。随时联系。我喜欢这个领域。你的想法和图坦韦恩一样，我更乐观：）

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