我正在设计一个在 HTML5 Canvas 元素上运行的 Photoshop 风格的 Web 应用程序。该程序运行良好并且速度非常快,直到我将混合模式添加到方程式中。我通过将每个画布元素合并为一个并使用从底部画布开始的正确混合模式组合每个画布中的每个像素来实现混合模式。
for (int i=0; i<width*height*4; i+=4) {
var base = [layer[0][i],layer[0][i+1],layer[0][i+2],layer[0][i+3]];
var nextLayerPixel = [layer[1][i],layer[1][i+1],layer[1][i+2],layer[1][i+3]];
//Apply first blend between first and second layer
basePixel = blend(base,nextLayerPixel);
for(int j=0;j+1 != layer.length;j++){
//Apply subsequent blends here to basePixel
nextLayerPixel = [layer[j+1][i],layer[j+1][i+1],layer[j+1][i+2],layer[j+1][i+3]];
basePixel = blend(basePixel,nextLayerPixel);
}
pixels[i] = base[0];
pixels[i+1] = base[1];
pixels[i+2] = base[2];
pixels[i+3] = base[3];
}
canvas.getContext('2d').putImageData(imgData,x,y);
用它来调用不同混合模式的混合。我的“正常”混合模式如下:
var blend = function(base,blend) {
var fgAlpha = blend[3]/255;
var bgAlpha = (1-blend[3]/255)*base[3]/255;
blend[0] = (blend[0]*fgAlpha+base[0]*bgAlpha);
blend[1] = (blend[1]*fgAlpha+base[1]*bgAlpha);
blend[2] = (blend[2]*fgAlpha+base[2]*bgAlpha);
blend[3] = ((blend[3]/255+base[3])-(blend[3]/255*base[3]))*255;
return blend;
}
我在 Chrome 中的测试结果(在测试的浏览器中产生了一些最好的)大约 400 毫秒,在 620x385(238,700 像素)的画布上将三层混合在一起。
这是一个非常小的实现,因为大多数项目的规模会更大,并且包含更多的层,这将使执行时间在这种方法下飙升。
我想知道是否有更快的方法将两个画布上下文与混合模式结合起来,而不必遍历每个像素。