微信小程序滤镜工具weImageFilters

发布时间:2019-06-24 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了微信小程序滤镜工具weImageFilters脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

声明

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

版本要求

基础库 1.9.0

简介

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

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

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

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

代码 tomfriwel/weImageFilters

效果图

屏幕截图

微信小程序滤镜工具weImageFilters

原图

微信小程序滤镜工具weImageFilters

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

微信小程序滤镜工具weImageFilters

  1. Binarize (srcImageData, threshold) 二值化, 参数:(imageData, 0.9)

微信小程序滤镜工具weImageFilters

  1. BoxBlur (srcImageData, hRadius, vRadius, qualITy) 方框模糊, 参数:(imageData, 3, 3, 2)

微信小程序滤镜工具weImageFilters

  1. GaussianBlur (srcImageData, strength) 高斯模糊, 参数:(imageData, 4)

微信小程序滤镜工具weImageFilters

  1. StackBlur (srcImageData, radius) 高斯模糊和框模糊的折衷方案, 参数:(imageData, 6)

微信小程序滤镜工具weImageFilters

  1. brightness (srcImageData, brightness) 亮度调节, 参数:(imageData, 100)

微信小程序滤镜工具weImageFilters

  1. BrightnessContrastGimp (srcImageData, brightness, contrast) 亮度、对比度, 参数:(imageData, 26, 13)

微信小程序滤镜工具weImageFilters

  1. BrightnessContrastPhotoshop (srcImageData, brightness, contrast) 亮度、对比度, 参数:(imageData, 26, 13)

微信小程序滤镜工具weImageFilters

  1. Channels (srcImageData, channel) 单色通道,这里为 blue Channel, 参数:(imageData, 3)

微信小程序滤镜工具weImageFilters

  1. ColorTransformFilter (srcImageData, redMultiplier, greenMultiplier, blueMultiplier, alphamultiplier, redOffset, greenOffset, blueOffset, alphaOffset) 颜色变换滤波器, 参数:(imageData, 2, 1, 1, 1, 38, 0, 0, 0)

微信小程序滤镜工具weImageFilters

  1. Desaturate (srcImageData) 冲淡

微信小程序滤镜工具weImageFilters

  1. Dither (srcImageData, levels) 高频振动, 参数:(imageData, 2)

微信小程序滤镜工具weImageFilters

  1. Edge (srcImageData) 边缘

微信小程序滤镜工具weImageFilters

  1. Emboss (srcImageData) 浮雕

微信小程序滤镜工具weImageFilters

  1. Enrich (srcImageData) 丰富

微信小程序滤镜工具weImageFilters

  1. Flip (srcImageData, vertical) 翻转, 参数:(imageData, 0)

微信小程序滤镜工具weImageFilters

  1. Gamma (srcImageData, gamma) γ, 参数:(imageData, 5)

微信小程序滤镜工具weImageFilters

  1. GrayScale (srcImageData) 灰度

微信小程序滤镜工具weImageFilters

  1. HSLAdjustment (srcImageData, hueDelta, satDelta, lightness) HSL调节, 参数:(imageData, -23, 54, 19)

微信小程序滤镜工具weImageFilters

  1. Invert (srcImageData) 反色

微信小程序滤镜工具weImageFilters

  1. Mosaic (srcImageData, blockSize) 马赛克,blockSize马赛克块的大小, 参数:(imageData, 10)

微信小程序滤镜工具weImageFilters

  1. Oil (srcImageData, range, levels) 油画效果, 参数:(imageData, 5, 62)

微信小程序滤镜工具weImageFilters

  1. OpacityFilter (srcImageData, opacity) 不透明度, 参数:(imageData, 123)

微信小程序滤镜工具weImageFilters

  1. Posterize (srcImageData, levels) 多色调分色印, 参数:(imageData, 6)

微信小程序滤镜工具weImageFilters

  1. Rescale (srcImageData, scale) 重新调节, 参数:(imageData, 3.2)

微信小程序滤镜工具weImageFilters

  1. Sepia(srcImageData) 褐色

微信小程序滤镜工具weImageFilters

  1. SharPEn (srcImageData, factor) 锐化, 参数:(imageData, 9)

微信小程序滤镜工具weImageFilters

  1. Solarize (srcImageData) 曝光

微信小程序滤镜工具weImageFilters

  1. Transpose (srcImageData) 调换

微信小程序滤镜工具weImageFilters

  1. Twril (srcImageData, centerX, centerY, radius, angle, edge, smooth) 水波旋转, 参数:(imageData, 0.5, 0.5, 40, 360, 0, true)

微信小程序滤镜工具weImageFilters

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

微信小程序滤镜工具weImageFilters

脚本宝典总结

以上是脚本宝典为你收集整理的微信小程序滤镜工具weImageFilters全部内容,希望文章能够帮你解决微信小程序滤镜工具weImageFilters所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。