微信小程序滤镜工具weImageFilters

声明

滤镜处理的代码99.9%来自于arahaya/ImageFilters.js,我这里只是做了一些小改动,使其能在微信小程序里使用。

版本要求

基础库 1.9.0

简介

最近发现一个网页上好用的滤镜库,滤镜效果有几十种,就稍微做了一些更改,使其能在微信小程序使用。

下面的效果图均由微信开发工具模拟器生成,并且在自己手机上也测试过,能正常使用。

有些效果会比较耗时,比如高斯模糊,对于320*320的图片有时候会有几秒处理时间。这里毕竟是手机并且相当于是在网页中进行处理,所以并不建议用来处理大图。

滤镜的参数我目前是写死的,可以根据需要修改。

代码 tomfriwel/weImageFilters

效果图

屏幕截图

屏幕截图

原图

原图

绘制在canvas中的图片(320*320)

original
  1. Binarize (srcImageData, threshold) 二值化, 参数:(imageData, 0.9)
Binarize
  1. BoxBlur (srcImageData, hRadius, vRadius, quality) 方框模糊, 参数:(imageData, 3, 3, 2)
BoxBlur
  1. GaussianBlur (srcImageData, strength) 高斯模糊, 参数:(imageData, 4)
GaussianBlur
  1. StackBlur (srcImageData, radius) 高斯模糊和框模糊的折衷方案, 参数:(imageData, 6)
StackBlur
  1. Brightness (srcImageData, brightness) 亮度调节, 参数:(imageData, 100)
Brightness
  1. BrightnessContrastGimp (srcImageData, brightness, contrast) 亮度、对比度, 参数:(imageData, 26, 13)
BrightnessContrastGimp
  1. BrightnessContrastPhotoshop (srcImageData, brightness, contrast) 亮度、对比度, 参数:(imageData, 26, 13)
BrightnessContrastPhotoshop
  1. Channels (srcImageData, channel) 单色通道,这里为 blue Channel, 参数:(imageData, 3)
Channels blue
  1. ColorTransformFilter (srcImageData, redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, alphaOffset) 颜色变换滤波器, 参数:(imageData, 2, 1, 1, 1, 38, 0, 0, 0)
ColorTransformFilter
  1. Desaturate (srcImageData) 冲淡
Desaturate
  1. Dither (srcImageData, levels) 高频振动, 参数:(imageData, 2)
Dither
  1. Edge (srcImageData) 边缘
Edge
  1. Emboss (srcImageData) 浮雕
Emboss
  1. Enrich (srcImageData) 丰富
Enrich
  1. Flip (srcImageData, vertical) 翻转, 参数:(imageData, 0)
Flip
  1. Gamma (srcImageData, gamma) γ, 参数:(imageData, 5)
Gamma
  1. GrayScale (srcImageData) 灰度
GrayScale
  1. HSLAdjustment (srcImageData, hueDelta, satDelta, lightness) HSL调节, 参数:(imageData, -23, 54, 19)
HSLAdjustment
  1. Invert (srcImageData) 反色
Invert
  1. Mosaic (srcImageData, blockSize) 马赛克,blockSize马赛克块的大小, 参数:(imageData, 10)
Mosaic
  1. Oil (srcImageData, range, levels) 油画效果, 参数:(imageData, 5, 62)
Oil
  1. OpacityFilter (srcImageData, opacity) 不透明度, 参数:(imageData, 123)
OpacityFilter
  1. Posterize (srcImageData, levels) 多色调分色印, 参数:(imageData, 6)
Posterize
  1. Rescale (srcImageData, scale) 重新调节, 参数:(imageData, 3.2)
Rescale
  1. Sepia(srcImageData) 褐色
Sepia
  1. Sharpen (srcImageData, factor) 锐化, 参数:(imageData, 9)
Sharpen
  1. Solarize (srcImageData) 曝光
Solarize
  1. Transpose (srcImageData) 调换
Transpose
  1. Twril (srcImageData, centerX, centerY, radius, angle, edge, smooth) 水波旋转, 参数:(imageData, 0.5, 0.5, 40, 360, 0, true)
Twril

将半径和旋转角度调节一下,参数:(imageData, 0.5, 0.5, 120, 90, 0, true)

Twril1

推荐阅读更多精彩内容