脚本宝典收集整理的这篇文章主要介绍了

微信小程序滤镜工具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

总结

以上是脚本宝典为你收集整理的

微信小程序滤镜工具weImageFilters

全部内容,希望文章能够帮你解决

微信小程序滤镜工具weImageFilters

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过