我正在设计一个运行在HTML5 Canvas元素上的Photoshop风格的Web应用程序。该程序运行良好,并非常迅速,直到我将混合模式添加到方程中。我通过将每个画布元素合并为一个,并使用从底部画布开始的正确混合模式组合每个画布中的每个像素来实现混合模式。加快HTML5 Canvas像素渲染
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;
}
我的测试结果在铬(产生一些最好出测试的浏览器的)围绕400ms的画布620x385(238700个像素)上进行混合三层在一起。
这是一个非常小的实现,因为大多数项目的尺寸会更大,并且会包含更多图层,这会使得执行时间在此方法下急剧增加。
我想知道是否有更快的方式来结合两个画布上下文与混合模式,而不必通过每个像素。
'nextLayerPixel'是什么?你如何创建它,为什么你在'blend'函数(第二个参数)中改变它? – Bergi 2012-08-03 02:49:15
我首先排除了那部分显示功能,没有额外的代码使它变得混乱,但现在我添加了它。'nextLayerPixel'只是一个变量,指的是每一层中的相同像素。因此,对于具有3个图层并且像素为x:30,y:20的项目,它将在30,20,然后是中间30,20,然后是顶部30,20抓取底层像素。 – 2012-08-03 02:55:22