canvas 实现图片局部模糊_Canvas模糊化处理图片、毛玻璃处理图片之stackblur.js

Canvas实现毛玻璃效果解决方式1：使用stackblur.js

在Android系统中实现图片的毛玻璃效果比较好用的类库是：Android StackBlur

简单API说明：

API 调用

下面是针对不同的源(图片或者 Canvas 等)进行 StackBlur 的调用。

图像作为源:

StackBlur.image(sourceImage, targetCanvas, radius, blurAlphaChannel);

sourceImage：HTMLImageElement或者它的id

targetCanvas：HTMLCanvasElement或者它的id

radius：模糊半径

blurAlphaChannel： 如果你想模糊一个 RGBA 的图像，就将其设置为true(可选，默认 =false)

RGBA Canvas 作为源:

StackBlur.canvasRGBA(targetCanvas, top_x, top_y, width, height, radius);

targetCanvas:HTMLCanvasElement

top_x: 要模糊的矩形的左上角的水平坐标

top_y: 要模糊的矩形的左上角的垂直坐标

width: 要模糊的矩形宽度

height: 要模糊的矩形高度

radius: 模糊半径

RGB Canvas 作为源:

StackBlur.canvasRGB(targetCanvas, top_x, top_y, width, height, radius);

targetCanvas:HTMLCanvasElement

top_x: 要模糊的矩形的左上角的水平坐标

top_y: 要模糊的矩形的左上角的垂直坐标

width: 要模糊的矩形宽度

height:要模糊的矩形高度

radius: 模糊半径

RGBA ImageData 作为源:

StackBlur.imageDataRGBA(imageData, top_x, top_y, width, height, radius);

imageData: canvas 的ImageData

top_x：要模糊的矩形的左上角的水平坐标

top_y: 要模糊的矩形的左上角的垂直坐标

width: 要模糊的矩形宽度

height: 要模糊的矩形高度

radius: 模糊半径

RGB ImageData 作为源:

StackBlur.imageDataRGB(imageData, top_x, top_y, width, height, radius);

imageData: canvas 的ImageData

top_x：要模糊的矩形的左上角的水平坐标

top_y: 要模糊的矩形的左上角的垂直坐标

width: 要模糊的矩形宽度

height: 要模糊的矩形高度

radius: 模糊半径

实例1：

varimg1=document.getElementById('img1');

img1.οnlοad= function() {//调用模糊处理

StackBlur.image('img1','canvas1',100,true);

}

实例2：相对完整点

1.添加引用

2.HTM和js

}

varimg1=document.getElementById('img1');

img1.οnlοad= function() {//调用模糊处理

StackBlur.image('img1','canvas1',100,true);

}//滑动控件

$('#ex1').slider().on('change',function(e) {varnewValue=e.value.newValue;//调用模糊处理

StackBlur.image('img1','canvas1', newValue,true);

});