Question

我想使用HTML5 Canvas Element在JavaScript中使用预定义的过滤器蒙版过滤图像。

我找到了一个可行的解决方案：

＆＃13;

//define source canvas
var srccanv = document.getElementById("src_canvas");
var ctx = srccanv.getContext("2d");
var w = srccanv.width;
var h = srccanv.height;

//just draw something into the canvas
ctx.beginPath();
ctx.fillStyle="gray";
ctx.fillRect(0,0,w,h);
ctx.lineWidth = 15;
ctx.strokeStyle = "lightgray";
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

//define destination canvas
var dstcanv = document.getElementById("dst_canvas");
var dctx = dstcanv.getContext("2d");
var dstImageData = dctx.getImageData(0,0,dstcanv.width,dstcanv.height);
var dst = dstImageData.data;


//filtermask
var filtermask = [-1,-1,-1,0,0,0,1,1,1];


var side = Math.round(Math.sqrt(filtermask.length));
var halfSide = Math.floor(side/2);
var srcImageData = ctx.getImageData(0,0,w,h);
var src = srcImageData.data;
var sw = w;
var sh = h;

console.time('convolution');
// go through the destination image pixels
for (var y=1; y<h-1; y++) {
   for (var x=1; x<w-1; x++) {
   
   		var sy = y;
   		var sx = x;
   		var dstOff = (y*w+x)*4;

   		// calculate the weighed sum of the source image pixels that
   		// fall under the convolution matrix    
   		var r=0, g=0, b=0, a=0;
   		for (var cy=0; cy<side; cy++) {
   		   for (var cx=0; cx<side; cx++) {
         		
   		      var scy = sy + cy - halfSide;
   		      var scx = sx + cx - halfSide;
   		      if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
   		         var srcOff = (scy*sw+scx)*4;
   		         var wt = filtermask[cy*side+cx];
   		         r += src[srcOff] * wt;
   		         g += src[srcOff+1] * wt;
   		         b += src[srcOff+2] * wt;
   		         a += src[srcOff+3];
   		      }
   		    }
   		 }	
       
       
   		 dst[dstOff] = r;
   		 dst[dstOff+1] = g;
   		 dst[dstOff+2] = b;
   		 dst[dstOff+3] = 255;
   	   
  }
 }
console.timeEnd('convolution');


dctx.putImageData(dstImageData,0,0);

＆＃13;

<canvas id="src_canvas"></canvas>
<canvas id="dst_canvas"></canvas>

＆＃13;

或看到这个小提琴：https://jsfiddle.net/w0fuxt64/20/

但是......我发现IE11的性能非常糟糕。我用最新版本的firefox（38.5.2 ESR）和Chrome（47.0）测试了我的代码，我得到了一些大约10-20ms的结果，用于过滤300px到150px的画布。（在浏览器的开发者控制台中查看时间）

用IE测试给我的结果大约280ms！这对我的目的来说太长了。有没有人有任何想法如何显着改善IE的代码。

提前致谢

贝尼

如何在IE中加速嵌套for循环？

0 个答案: