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