需要画布模糊工具

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. 将屏幕外画布合成设置为"source-in"(任何新图形仅在现有笔刷上.
6. drawImage在屏幕外画布上的图像(图像将仅在笔触上绘制)
7. 使用模糊算法模糊屏幕外画布(此时,屏幕外画布仅在笔触上包含模糊图像)
8. 清除屏幕画布
9. 使用drawImage将模糊的画笔图像从屏幕外画布复制到屏幕画布上.
10. 设置合成为"destination-over"的屏幕画布(在现有的模糊画笔图像后面绘制新图纸
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();

来源图片:

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

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