背景
小程序的canvas是微信基于原生组件自行封装的，因此接口跟web的canvas有不少区别，早期更是没有支持像素级的处理能力。
在18年初的小程序基础库1.9.0版本更新中，出现了wx.canvasGetImageData和wx.canvasPutImageData两个重要的API，补全了像素处理能力，因此，小程序在客户端进行图片处理成为了可能。
具体可以参考：
偷偷迭代的重磅功能---小程序的像素处理能力
wx.canvasGetImageData
图片配色分析小程序：小色卡
为了尝试小程序的图像处理能力，我做了个用于图片配色分析的小程序-小色卡。
功能主要是：用户选择一张图片，程序会分析图片的配色，并把配色展示为一张色卡给用户。用户可以保存、编辑、复制自己的色卡。这个功能对初级的UI设计师有一定的帮助（可能吧...）。
源码：github：mini-color-card
体验小程序：
原理
小程序实现配色分析主要步骤如下：
- 用户选择图片，拿到imgPath后绘制到canvas上。
- 通过wx.canvasGetImageData这个接口读取图片数据
- 对图片数据进行预处理，剔除alpha比较小并且不是白色的点。（非必要）
- 对图片像素数据进行聚类。每个像素的颜色可以作为一个三维向量来看。
基本逻辑如下：
wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: (res) = { wx.getImageInfo({ src: res.tempFilePaths[0], success: (imgInfo) = { let { width, height, imgPath } = imgInfo; let ctx = wx.createCanvasContext(this.canvasID); ctx.drawImage(imgPath,0,0,width,height); ctx.draw(false,()={ wx.canvasGetImageData({ canvasId: this.canvasID, x: 0, y: 0, width: width, height: height, success(res) { var pixels = res.data; var pixelCount = width*height; var pixelArray = []; // 对像素数据进行预处理 for (var i = 0, offset, r, g, b, a; i pixelCount; i = i + quality) { offset = i * 4; r = pixels[offset + 0]; g = pixels[offset + 1]; b = pixels[offset + 2]; a = pixels[offset + 3]; if (a = 125) { if (!(r 250 && g 250 && b 250)) { pixelArray.push([r, g, b]); } } } var cmap = MMCQ.quantize(pixelArray, colorCount);//聚类，MMCQ是个用于图像分析的库 var palette = cmap ? cmap.palette() : null; console.log('配色为：',palette); } }) }) } }) }})小结
一开始我是不想把canvas显示出来的，只想用它获取图像内容，但是实践下来是不可行的。小程序的canvas并不允许离屏渲染，想要用它进行图片处理，就要老老实实用它进行展示。
这里只实践了wx.canvasGetImageData读取数据进行图像分析，不过结合wx.canvasPutImageData，滤镜之类的图像处理应该都是可以做了。小程序的想象空间还是挺大的。
