收藏
评论

wx-caman——微信小程序 Canvas 像素级滤镜处理库

做这个项目的初衷是希望能够开发一款不依赖服务端而纯通过客户端渲染为图片添加滤镜的小程序。但是由于微信小程序中的 canvas 组件与 DOM Canvas 元素有较大差异,因此传统的 Canvas 处理库几乎无法在小程序中使用。在调研了一些传统浏览器端的项目后,我发现 CamanJS 的功能比较完善,同时也比较容易对微信小程序进行适配。在阅读完毕 CamanJS 源码(顺便学习了一下 CoffeeScript)以及学习了小程序的 canvas 组件的条条框框之后,wx-caman 就诞生了。wx-caman 由 CamanJS 封装而来,基于 ES6 进行了重写,并针对微信小程序进行了适配。其使用基本与 CamanJS 保持一致,同时剔除了无关功能,能够对小程序中的 canvas 进行像素级别的图像滤镜处理。

wx-caman 支持多个常见图片滤镜处理,例如 Brightness、Contrast、Sepia、Saturation 等,同时还内置了多个预设滤镜例如 lomo、sunrise、sinCity 等,方便直接使用;支持多图层混合,常见的混合模式 multiply、overlay 等也都悉数支持。

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 的初始化
收藏
登录 后发表内容