基于 CamanJS 的微信小程序 Canvas 像素级滤镜处理库

基于 Camanjs 的微信小程序 Canvas 像素级滤镜处理库

wx-caman

基于 CamanJS 的微信小程序 Canvas 像素级滤镜处理库

介绍

由于微信小程序中的 canvas 组件与 DOM Canvas 元素有较大差异，因此传统的 Canvas 处理库几乎无法在小程序中使用。wx-caman 由 CamanJS 封装而来并针对微信小程序进行了适配。其使用基本与 CamanJS 保持一致，能够对小程序中的 canvas 进行像素级别的图像滤镜处理。

安装

npm

在 mpvue 等支持 npm 的小程序开发框架中，可以直接使用 npm 进行安装：

npm install wx-caman

然后在项目中引入：

// es6 modulesimport WxCaman from 'wx-caman'// or cjsvar WxCaman = require('wx-caman').default

直接引入文件

将当前 repo 中 dist/ 目录下的 wx-caman.min.js 文件直接拷贝至你的小程序项目中的 vendor 目录下，然后在项目中引入：

var WxCaman = require('vendor/wx-caman.min.js').default

快速开始

小程序对于 canvas 组件限制较多，详情参考官方文档。在使用 wx-caman 前，我们必须在 WXML 中定义 canvas 组件并且设置 canvas-id。

Page({ onReady: function (e) { // 使用 wx.createContext 获取绘图上下文 context var context = wx.createCanvasContext('firstCanvas') context.setStrokeStyle('#00ff00') context.setLineWidth(5) context.rect(0, 0, 200, 200) context.stroke() context.setStrokeStyle('#ff0000') context.setLineWidth(2) context.moveTo(160, 100) context.arc(100, 100, 60, 0, 2 * Math.PI, true) context.draw(false, function() { new WxCaman('firstCanvas', 300, 200, function () { this.brightness(10) this.contrast(30) this.sepia(60) this.saturation(-30) this.render() }) }) }})

进阶使用

此处文档可直接参考 CamanJS 文档：AsvancedUsage

注：wx-caman 不支持 Cropping/Resizing 和 Events。

内置函数

此处文档可直接参考 CamanJS 文档：Built-In Functionality

支持基础滤镜如下：

BrightnessChannelsClipColorizeContrastCurvesExposureFill ColorGammaGreyscaleHueInvertNoiseSaturationSepiaVibrance

预设滤镜

wx-caman 支持以下预设滤镜：

vintagelomosinCitysunrisecrossProcessorangePeellovegrungypinholeoldBootglowingSunhazyDaysherMajestynostalgiahemingway

其中，vintage/lomo/sunrise/grungy/pinhole/oldBoot/glowingSun/hazyDays/nostalgia 可接收一个 Boolean 参数，表示是否使用晕映效果，默认为 true，即使用晕映效果。

使用示例：

new WxCaman('firstCanvas', 300, 200, function () { this.lomo(false) this.render()})

注意事项

为了确保 wx-caman 准确获取 canvas 组件的像素数据，请务必在 draw 的回调函数中使用 wx-camanwx-caman 需要获取到 canvas 组件的真实宽高。但在实际使用中 canvas 组件可能使用了 width: 90% 等相对宽高数值，此时可使用 wx.createSelectorQuery() 来获取到 canvas 组件渲染后的实际宽高，然后再进行 wx-caman 的初始化

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。