从事微信小程序开发的同仁们应当熟知，微信小程序系基于原生组件自主封装而成，其接口与Web端存在诸多差异，尤其在早期，更是缺乏对像素级处理的支撑能力。在处理小程序内图片配色问题上，众多开发者常常感到困扰。

2018年初，小程序基础库1.9.0版本进行了更新，其中引入了wx.和wx.两个关键API，这使得像素处理功能得以完善，从而使得在客户端对图片进行操作成为了一种可能。

具体可以参考：wx.

图片配色分析小程序：小色卡

为了测试小程序在图像处理方面的功能，我们开发了一款专门用于图片色彩分析的小程序，名为“小色卡”。

该功能的核心作用在于：用户挑选出一张图片后，程序将对其色彩进行解析，并将这些色彩以色卡的形式呈现给用户。用户有权保存、修改或复制这些色卡。这一功能对于刚开始接触UI设计的初学者来说，或许能提供一定的辅助作用（或许吧...）。

源码：：mini--card

体验小程序：

原理

小程序实现配色分析主要步骤如下：

用户挑选了图片，随后将其绘制于指定位置。利用wx接口，我们能够获取图片的相关数据。接下来，对这些数据进行初步处理，移除那些尺寸较小且非白色的像素点（这一步骤并非必须）。然后，对像素的颜色信息进行聚类分析。每个像素的颜色可以被视为一个三维向量。

基本逻辑如下：

wx.chooseImage({ count: 1, 尺寸类型包括：原始尺寸，以及压缩尺寸。 sourceType包含：'album'、'camera'两种类型。 success: (res) => { wx.getImageInfo({ src: res.tempFilePaths[0], success: (imgInfo) => { let { width, height, imgPath } = imgInfo;

获取到当前画布的上下文，使用wx.createCanvasContext方法，并将canvasID作为参数传入。 在绘制图像时，需要将图片路径指定为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 pixelArray = []; // 对像素数据进行预处理 在循环中，初始化变量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) {

若不是红色、绿色和蓝色值均超过250，则不执行。 pixelArray.push([r, g, b]); } } } 定义变量cmap，该变量通过调用MMCQ库中的quantize函数对pixelArray进行聚类处理，其中colorCount指定了聚类数量，MMCQ是一个专门用于图像分析的库。 若存在颜色映射，则获取其调色板；否则，返回null。 在控制台中输出：“配色信息如下：”，紧接着是变量palette所存储的值。 } }) }) } }) } }) 复制代码

小结

最初并未打算让它直接展示，仅计划通过它来提取图像信息，然而实际操作中发现这种方法并不可行。小程序不支持离屏渲染功能，若想利用它进行图片处理，就必须诚实地用它来展示内容。

在此我们仅进行了通过wx读取数据并执行图像分析的操作，但考虑到wx的功能，诸如应用滤镜等图像处理操作同样可行。小程序的应用潜力十分广阔。

今日的分享便到此结束，若您有更多疑问或感悟，不妨前往春哥技术源码论坛区域留言或展开讨论。