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

saucxs 发布于2019-08-22 18:11 / 1869人阅读

摘要：但是由于微信小程序中的组件与元素有较大差异，因此传统的处理库几乎无法在小程序中使用。在调研了一些传统浏览器端的项目后，我发现的功能比较完善，同时也比较容易对微信小程序进行适配。由封装而来，基于进行了重写，并针对微信小程序进行了适配。

做这个项目的初衷是希望能够开发一款不依赖服务端而纯通过客户端渲染为图片添加滤镜的小程序。但是由于微信小程序中的 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 等也都悉数支持。

使用上，下面是一个简单示例：

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()
      })
    })
  }
})

想要了解更多可移步项目仓库，欢迎 star，同时使用过程中有任何问题也欢迎提交 issue。

本文首发于我的博客（点此查看），欢迎关注。

GPU云服务器云服务器免费的微信小程序怎么开发自己的微信小程序如何拥有自己的微信小程序房屋出租售的微信小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95596.html

前端图像处理指南

摘要：本文会介绍位图处理，矢量图和图像处理，重点是，并且最后会附上一个小应用。以上列举部分，更多备胎在此矢量图处理讲完位图再说矢量图。矢量图在绘制图标商业动画元素上应用非常广范。计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指不借助任何后端服务纯前端实现的图像...

Anshiii 2019-08-30 13:21 评论0 收藏0
前端图像处理指南

摘要：本文会介绍位图处理，矢量图和图像处理，重点是，并且最后会附上一个小应用。以上列举部分，更多备胎在此矢量图处理讲完位图再说矢量图。矢量图在绘制图标商业动画元素上应用非常广范。计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指不借助任何后端服务纯前端实现的图像...

CatalpaFlat 2019-08-20 13:33 评论0 收藏0
6 款 Javascript 的图像处理库

摘要：运行代码的结果如下是大名鼎鼎的并且非常权威的图像处理库。允许使用不同的媒介，用于创建动画片，数字形象和数字艺术，也可以用于图像处理。从正面的角度看，他是一个可灵活调整以及一个很好的了解图像处理算法的途径。文/ Tine译/Mantra 附原文地址：http://blog.webkid.io/image-p... 如果你正在寻找更高效的办法来处理或操纵你 web 项目中的图片，那么这篇...

muddyway 2019-08-21 11:38 评论0 收藏0
微信小程序滤镜工具weImageFilters

摘要：声明滤镜处理的代码来自于，我这里只是做了一些小改动，使其能在微信小程序里使用。版本要求基础库简介最近发现一个网页上好用的滤镜库，滤镜效果有几十种，就稍微做了一些更改，使其能在微信小程序使用。声明滤镜处理的代码99.9%来自于arahaya/ImageFilters.js，我这里只是做了一些小改动，使其能在微信小程序里使用。版本要求基础库 1.9.0 简介最近发现一个网页上好用...

testbird 2019-08-23 11:48 评论0 收藏0