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);

});

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的canvas 实现图片局部模糊_Canvas模糊化处理图片、毛玻璃处理图片之stackblur.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。