做这个项目的初衷是希望能够开发一款不依赖服务端而纯通过客户端渲染为图片添加滤镜的小程序。但是由于微信小程序中的 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 等也都悉数支持。 使用上,下面是一个简单示例: <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() }) }) } }) |
wx-caman——基于 CamanJS 的微信小程序 Canvas 像素级滤镜处理库
发布:2018-06-22 09:51浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08