Canvas實(shí)現(xiàn)毛玻璃效果解決方式1：使用stackblur.js

在Android系統(tǒng)中實(shí)現(xiàn)圖片的毛玻璃效果比較好用的類庫(kù)是：Android StackBlur

簡(jiǎn)單API說明：

API 調(diào)用

下面是針對(duì)不同的源(圖片或者 Canvas 等)進(jìn)行 StackBlur 的調(diào)用。

圖像作為源:

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

sourceImage：HTMLImageElement或者它的id

targetCanvas：HTMLCanvasElement或者它的id

radius：模糊半徑

blurAlphaChannel： 如果你想模糊一個(gè) RGBA 的圖像，就將其設(shè)置為true(可選，默認(rèn) =false)

RGBA Canvas 作為源:

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

targetCanvas:HTMLCanvasElement

top_x: 要模糊的矩形的左上角的水平坐標(biāo)

top_y: 要模糊的矩形的左上角的垂直坐標(biāo)

width: 要模糊的矩形寬度

height: 要模糊的矩形高度

radius: 模糊半徑

RGB Canvas 作為源:

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

targetCanvas:HTMLCanvasElement

top_x: 要模糊的矩形的左上角的水平坐標(biāo)

top_y: 要模糊的矩形的左上角的垂直坐標(biāo)

width: 要模糊的矩形寬度

height:要模糊的矩形高度

radius: 模糊半徑

RGBA ImageData 作為源:

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

imageData: canvas 的ImageData

top_x：要模糊的矩形的左上角的水平坐標(biāo)

top_y: 要模糊的矩形的左上角的垂直坐標(biāo)

width: 要模糊的矩形寬度

height: 要模糊的矩形高度

radius: 模糊半徑

RGB ImageData 作為源:

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

imageData: canvas 的ImageData

top_x：要模糊的矩形的左上角的水平坐標(biāo)

top_y: 要模糊的矩形的左上角的垂直坐標(biāo)

width: 要模糊的矩形寬度

height: 要模糊的矩形高度

radius: 模糊半徑

實(shí)例1：

varimg1=document.getElementById('img1');

img1.οnlοad= function() {//調(diào)用模糊處理

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

}

實(shí)例2：相對(duì)完整點(diǎn)

1.添加引用

2.HTM和js

}

varimg1=document.getElementById('img1');

img1.οnlοad= function() {//調(diào)用模糊處理

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

}//滑動(dòng)控件

$('#ex1').slider().on('change',function(e) {varnewValue=e.value.newValue;//調(diào)用模糊處理

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

});

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。