資訊專欄INFORMATION COLUMN
摘要：聲明濾鏡處理的代碼來自于，我這里只是做了一些小改動(dòng)，使其能在微信小程序里使用。版本要求基礎(chǔ)庫(kù)簡(jiǎn)介最近發(fā)現(xiàn)一個(gè)網(wǎng)頁上好用的濾鏡庫(kù)，濾鏡效果有幾十種，就稍微做了一些更改，使其能在微信小程序使用。
聲明
濾鏡處理的代碼99.9%來自于arahaya/ImageFilters.js，我這里只是做了一些小改動(dòng)，使其能在微信小程序里使用。版本要求
基礎(chǔ)庫(kù) 1.9.0簡(jiǎn)介
最近發(fā)現(xiàn)一個(gè)網(wǎng)頁上好用的濾鏡庫(kù)，濾鏡效果有幾十種，就稍微做了一些更改，使其能在微信小程序使用。
下面的效果圖均由微信開發(fā)工具模擬器生成，并且在自己手機(jī)上也測(cè)試過，能正常使用。
有些效果會(huì)比較耗時(shí)，比如高斯模糊，對(duì)于320*320的圖片有時(shí)候會(huì)有幾秒處理時(shí)間。這里畢竟是手機(jī)并且相當(dāng)于是在網(wǎng)頁中進(jìn)行處理，所以并不建議用來處理大圖。
濾鏡的參數(shù)我目前是寫死的，可以根據(jù)需要修改。
代碼 tomfriwel/weImageFilters 效果圖屏幕截圖
原圖
繪制在canvas中的圖片（320*320）
Binarize (srcImageData, threshold) 二值化, 參數(shù):(imageData, 0.9)
BoxBlur (srcImageData, hRadius, vRadius, quality) 方框模糊, 參數(shù):(imageData, 3, 3, 2)
GaussianBlur (srcImageData, strength) 高斯模糊, 參數(shù):(imageData, 4)
StackBlur (srcImageData, radius) 高斯模糊和框模糊的折衷方案, 參數(shù):(imageData, 6)
Brightness (srcImageData, brightness) 亮度調(diào)節(jié), 參數(shù):(imageData, 100)
BrightnessContrastGimp (srcImageData, brightness, contrast) 亮度、對(duì)比度, 參數(shù):(imageData, 26, 13)
BrightnessContrastPhotoshop (srcImageData, brightness, contrast) 亮度、對(duì)比度, 參數(shù):(imageData, 26, 13)
Channels (srcImageData, channel) 單色通道，這里為 blue Channel, 參數(shù):(imageData, 3)
ColorTransformFilter (srcImageData, redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, alphaOffset) 顏色變換濾波器, 參數(shù):(imageData, 2, 1, 1, 1, 38, 0, 0, 0)
Desaturate (srcImageData) 沖淡
Dither (srcImageData, levels) 高頻振動(dòng), 參數(shù):(imageData, 2)
Edge (srcImageData) 邊緣
Emboss (srcImageData) 浮雕
Enrich (srcImageData) 豐富
Flip (srcImageData, vertical) 翻轉(zhuǎn), 參數(shù):(imageData, 0)
Gamma (srcImageData, gamma) γ, 參數(shù):(imageData, 5)
GrayScale (srcImageData) 灰度
HSLAdjustment (srcImageData, hueDelta, satDelta, lightness) HSL調(diào)節(jié), 參數(shù):(imageData, -23, 54, 19)
Invert (srcImageData) 反色
Mosaic (srcImageData, blockSize) 馬賽克，blockSize馬賽克塊的大小, 參數(shù):(imageData, 10)
Oil (srcImageData, range, levels) 油畫效果, 參數(shù):(imageData, 5, 62)
OpacityFilter (srcImageData, opacity) 不透明度, 參數(shù):(imageData, 123)
Posterize (srcImageData, levels) 多色調(diào)分色印, 參數(shù):(imageData, 6)
Rescale (srcImageData, scale) 重新調(diào)節(jié), 參數(shù):(imageData, 3.2)
Sepia(srcImageData) 褐色
Sharpen (srcImageData, factor) 銳化, 參數(shù):(imageData, 9)
Solarize (srcImageData) 曝光
Transpose (srcImageData) 調(diào)換
Twril (srcImageData, centerX, centerY, radius, angle, edge, smooth) 水波旋轉(zhuǎn), 參數(shù):(imageData, 0.5, 0.5, 40, 360, 0, true)
將半徑和旋轉(zhuǎn)角度調(diào)節(jié)一下，參數(shù):(imageData, 0.5, 0.5, 120, 90, 0, true)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97500.html
摘要：但是由于微信小程序中的組件與元素有較大差異，因此傳統(tǒng)的處理庫(kù)幾乎無法在小程序中使用。在調(diào)研了一些傳統(tǒng)瀏覽器端的項(xiàng)目后，我發(fā)現(xiàn)的功能比較完善，同時(shí)也比較容易對(duì)微信小程序進(jìn)行適配。由封裝而來，基于進(jìn)行了重寫，并針對(duì)微信小程序進(jìn)行了適配。 做這個(gè)項(xiàng)目的初衷是希望能夠開發(fā)一款不依賴服務(wù)端而純通過客戶端渲染為圖片添加濾鏡的小程序。但是由于微信小程序中的 canvas 組件與 DOM Canvas...
awesome-github-wechat-weapp 是由OpenDigg整理并維護(hù)的微信小程序開源項(xiàng)目庫(kù)集合。我們會(huì)定期同步上的項(xiàng)目到這里，也歡迎各位 UI組件開發(fā)框架實(shí)用庫(kù)開發(fā)工具服務(wù)端項(xiàng)目實(shí)例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫(kù)zanui-weapp ★794 - 好用易擴(kuò)展的小程序 UI 庫(kù)wx-charts ★449 - 微信小程...
摘要：微信應(yīng)用號(hào)小程序資源匯總。每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補(bǔ)充。 wechat-weapp-resource 微信應(yīng)用號(hào)（小程序）資源匯總。 每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補(bǔ)充。 showImg(https://segmentfault.com/img/remote/1460000...
閱讀 1650·2021-09-26 09:55
閱讀 1383·2021-09-23 11:22
閱讀 2742·2021-09-06 15:02
閱讀 2651·2021-09-01 11:43
閱讀 3971·2021-08-27 13:10
閱讀 3688·2021-08-12 13:24
閱讀 2079·2019-08-30 12:56
閱讀 3005·2019-08-30 11:22
