基于 CamanJS 的微信小程序 Canvas 像素级滤镜处理库
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.babelrc
.eslintrc.js
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
package.json
rollup.dev.js
rollup.prod.js

README.md

wx-caman

Build Status

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

介绍

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

安装

npm

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

npm install wx-caman

然后在项目中引入:

// es6 modules
import WxCaman from 'wx-caman'

// or cjs
var 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。

<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
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

支持基础滤镜如下:

  • Brightness
  • Channels
  • Clip
  • Colorize
  • Contrast
  • Curves
  • Exposure
  • Fill Color
  • Gamma
  • Greyscale
  • Hue
  • Invert
  • Noise
  • Saturation
  • Sepia
  • Vibrance

预设滤镜

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

  • vintage
  • lomo
  • sinCity
  • sunrise
  • crossProcess
  • orangePeel
  • love
  • grungy
  • pinhole
  • oldBoot
  • glowingSun
  • hazyDays
  • herMajesty
  • nostalgia
  • hemingway

其中,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-caman
  • wx-caman 需要获取到 canvas 组件的真实宽高。但在实际使用中 canvas 组件可能使用了 width: 90% 等相对宽高数值,此时可使用 wx.createSelectorQuery() 来获取到 canvas 组件渲染后的实际宽高,然后再进行 wx-caman 的初始化