The original intention of this project is to develop a small program that does not rely on the server side but purely adds filters to the picture through client side rendering. However, due to the great difference between canvas component and DOM canvas element in wechat applet, the traditional canvas processing library can hardly be used in the applet. After investigating some traditional browser-side projects, I found that CamanJS has relatively perfect functions, and it is also easy to adapt small programs of wechat. After reading the CamanJS source code (and learning CoffeeScript) and learning the rules and regulations of the canvas component of the applet, WX-Caman was born. Wx-caman is encapsulated by CamanJS, rewritten based on ES6, and adapted for wechat applets. Its use is basically consistent with CamanJS, while eliminating irrelevant functions, which can carry out pixel-level image filter processing to the canvas in the small program.

Wx-caman supports multiple common image filters, such as Brightness, Contrast, Sepia, Saturation, etc. It also has built-in multiple preset filters, such as LOMO, Sunrise, sinCity, etc., which is convenient to use directly. Multi-layer mixing is supported. Common mixing modes such as multiply and overlay are also supported.

In use, here is a simple example:

<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
Copy the code
Page({
  onReady: function (e) {
    Use wx.createconText to get the drawing 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()
      })
    })
  }
})
Copy the code

To learn more about the portable project repository, welcome star and submit an issue if you have any problems using it.

This article was first published on my blog (click here to view it).