所需的画布模糊工具

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

有趣的问题！

以下是使用以下方法实现模糊画笔的方法：

• 屏幕外的画布
• 模糊效果算法
• 合成以“剪切”图像以适合用户的笔触
• 将“模糊的笔触”图像后面的清晰图像“拖到后面”。

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

1. 创建一个屏幕外画布
2. 让用户用刷子在屏幕上的画布上绘画
3. 同时在屏幕外的画布上绘制相同的笔触
4. 用户刷完后...
5. 将屏幕外画布合成设置为“源入”（任何新图形仅在现有笔触上进行。
6. drawImage屏幕外画布上的图像（仅在笔触上绘制图像）
7. 使用模糊算法模糊屏幕外画布（此时，屏幕外画布仅在笔触上包含模糊图像）
8. 清除屏幕上的画布
9. 使用drawImage将模糊的笔刷图像从屏幕外的画布复制到屏幕上的画布。
10. 将屏幕上的画布合成设置为“目标结束”（在现有的模糊画笔图像后面绘制新图形
11. drawImage源图像到屏幕画布上（模糊的笔刷图像仍然保留，并且源图像绘制在该笔刷图像的后面）

这就是代码中的样子：

（模糊效果是使用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();

源图像：

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

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