需要画布模糊工具

Question

我有一些类似fabric.js（http://fabricjs.com/freedrawing/）的应用程序 我想嵌入像Photoshop（http://www.demowolf.com/tutorials/demo.php?id=1503&series=85&format=html）

这样的模糊工具

这是我的模糊功能，但是当我尝试改变颜色时它工作不正常它会出错，你可以看到下面的截图...

function boxBlurCanvasRGBA( id, top_x, top_y, width, height, radius, iterations ){
 if ( isNaN(radius) || radius < 1 ) return;

 radius |= 0;

 if ( isNaN(iterations) ) iterations = 1;
 iterations |= 0;
 if ( iterations > 3 ) iterations = 3;
 if ( iterations < 1 ) iterations = 1;

 var canvas  = document.getElementById( 'paper' );
 var context = canvas.getContext("2d");
 var imageData;

 try {
   try {
  imageData = context.getImageData( top_x, top_y, width, height );
   } catch(e) {

  // NOTE: this part is supposedly only needed if you want to work with local files
  // so it might be okay to remove the whole try/catch block and just use
  // imageData = context.getImageData( top_x, top_y, width, height );
  try {
   netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
   imageData = context.getImageData( top_x, top_y, width, height );
  } catch(e) {
   alert("Cannot access local image");
   throw new Error("unable to access local image data: " + e);
   return;
  }
   }
 } catch(e) {
   alert("Cannot access image");
   throw new Error("unable to access image data: " + e);
   return;
 }

 var pixels = imageData.data;

 var rsum,gsum,bsum,asum,x,y,i,p,p1,p2,yp,yi,yw,idx,pa;  
 var wm = width - 1;
   var hm = height - 1;
    var wh = width * height;
 var rad1 = radius + 1;

 var mul_sum = mul_table[radius];
 var shg_sum = shg_table[radius];

 var r = [];
    var g = [];
    var b = [];
 var a = [];

 var vmin = [];
 var vmax = [];

 while ( iterations-- > 0 ){
  yw = yi = 0;

  for ( y=0; y < height; y++ ){
   rsum = pixels[yw]   * rad1;
   gsum = pixels[yw+1] * rad1;
   bsum = pixels[yw+2] * rad1;
   asum = pixels[yw+3] * rad1;


   for( i = 1; i <= radius; i++ ){
    p = yw + (((i > wm ? wm : i )) << 2 );
    rsum += pixels[p++];
    gsum += pixels[p++];
    bsum += pixels[p++];
    asum += pixels[p]
   }

   for ( x = 0; x < width; x++ ) {
    r[yi] = rsum;
    g[yi] = gsum;
    b[yi] = bsum;
    a[yi] = asum;

    if( y==0) {
     vmin[x] = ( ( p = x + rad1) < wm ? p : wm ) << 2;
     vmax[x] = ( ( p = x - radius) > 0 ? p << 2 : 0 );
    } 

    p1 = yw + vmin[x];
    p2 = yw + vmax[x];

    rsum += pixels[p1++] - pixels[p2++];
    gsum += pixels[p1++] - pixels[p2++];
    bsum += pixels[p1++] - pixels[p2++];
    asum += pixels[p1]   - pixels[p2];

    yi++;
   }
   yw += ( width << 2 );
  }

  for ( x = 0; x < width; x++ ) {
   yp = x;
   rsum = r[yp] * rad1;
   gsum = g[yp] * rad1;
   bsum = b[yp] * rad1;
   asum = a[yp] * rad1;

   for( i = 1; i <= radius; i++ ) {
     yp += ( i > hm ? 0 : width );
     rsum += r[yp];
     gsum += g[yp];
     bsum += b[yp];
     asum += a[yp];
   }

   yi = x << 2;
   for ( y = 0; y < height; y++) {

    pixels[yi+3] = pa = (asum * mul_sum) >>> shg_sum;
    if ( pa > 0 )
    {
     pa = 255 / pa;
     pixels[yi]   = ((rsum * mul_sum) >>> shg_sum) * pa;
     pixels[yi+1] = ((gsum * mul_sum) >>> shg_sum) * pa;
     pixels[yi+2] = ((bsum * mul_sum) >>> shg_sum) * pa;
    } else {
     pixels[yi] = pixels[yi+1] = pixels[yi+2] = 0;
    }    
    if( x == 0 ) {
     vmin[y] = ( ( p = y + rad1) < hm ? p : hm ) * width;
     vmax[y] = ( ( p = y - radius) > 0 ? p * width : 0 );
    } 

    p1 = x + vmin[y];
    p2 = x + vmax[y];

    rsum += r[p1] - r[p2];
    gsum += g[p1] - g[p2];
    bsum += b[p1] - b[p2];
    asum += a[p1] - a[p2];

    yi += width << 2;
   }
  }
 }
 context.globalAlpha = 0.8;
 context.putImageData( imageData, top_x, top_y );

}

任何人都可以给我一些代码示例吗？

Answer 1

有趣的问题！

以下是如何使用以下方法实现模糊画笔

• 一个屏幕外的画布
• 模糊效果算法
• 合成＆＃34; clip＆＃34;一个适合用户笔触的图像
• 合成＆＃34; draw-behind＆＃34;模糊的笔画图像背后的清晰图像。

演示：http://jsfiddle.net/m1erickson/baDLp/

1. 创建一个屏幕外画布
2. 让用户使用画笔在屏幕画布上绘图
3. 同时在屏幕外画布上绘制相同的画笔笔划
用户刷完后
4. ......
5. 将屏幕外画布合成设置为＆＃34; source-in＆＃34; （任何新图纸仅在现有的笔触上。
6. 在屏幕外画布上绘制图像（图像仅在笔触上绘制）
7. 使用模糊算法模糊屏幕外画布（此时，屏幕外画布仅在笔触上包含模糊图像）
8. 清除屏幕画布
9. 使用drawImage将模糊的画笔图像从屏幕外画布复制到屏幕画布上。
10. 将合成的屏幕画布设置为＆＃34; destination-over＆＃34; （在现有的模糊画笔后面绘制新图纸
11. 将源图像绘制到屏幕画布上（模糊的画笔图像保留，源图像绘制在画笔图像后面）

以下是代码的外观：

（模糊效果是使用quasimondo的漂亮模糊算法完成的：http://jsfiddle.net/m1erickson/baDLp/）

// At this point, the temp canvas contains 
// only the users brush strokes

// draw the image "clipped" into those brush strokes
// using compositing == "source-in"

tempCtx.save();
tempCtx.globalCompositeOperation="source-in";
tempCtx.drawImage(img,0,0);
tempCtx.restore();

// blur the brush-image on the temp canvas

boxBlurCanvasRGBA("tempCanvas",0,0,tempCanvas.width,tempCanvas.height,4,0);


// clear the onscreen canvas

ctx.save();
ctx.clearRect(0,0,canvas.width,canvas.height);

// draw the brush-image from the temp canvas to the onscreen canvas
ctx.drawImage(tempCanvas,0,0);

// use compositing == "destination-over"
// to draw the source image *behind* the blurred brush-image

ctx.globalCompositeOperation="destination-over";
ctx.drawImage(img,0,0);
ctx.restore();

来源图片：



仅在描边区域上绘制图像然后模糊后的非屏幕画布：



模糊区域的屏幕画布合并到源图像中：