偷偷迭代的重磅功能---小程序的像素处理能力

不知道是什么时候？也许是春节期间？小程序的绘图api默默新增了两个接口：

wx.canvasGetImageData，返回一个数组，用来描述 canvas 区域隐含的像素数据 wx.canvasPutImageData，将像素数据绘制到画布的方法

官方没有发文说明，而是偷偷放在开发文档里，程序员同学真调皮，这两个在花叔看来相当实用的功能，却发布得这么低调，接下来从不同角度说说这是什么。

一.屏显原理

在介绍这两个接口前，需要介绍显示屏显示图片的基础逻辑，显示器屏幕要展现一张图片，会用许许多多像素点并按照矩阵的方式去排列，把某个图片放大到不能再放大，就会发现这些像素点具备不同的颜色和透明度，计算机用三原色加透明度去记录这些信息。

例如我们常见的红色，计算机可以通过以下方式记录数据rgba（255,0,0,1）

二.小程序接口逻辑

这两个接口相当于提供像素点信息的读写操作，通过wx.canvasGetImageData获取特定像素点的位置以及rgba值，然后基于这些数据，经过加工后又可以经过wx.canvasPutImageData把新的像素点填充回去。

三.实际案例应用场景？

显而易见，图片滤镜功能特别合适。然而，大伙去小程序里搜索一下“滤镜”，

你会发现很多类似的图片滤镜小程序，那么有同学就疑惑了，他们那么快就用上了这两个接口么？

未必吧，因为在这个接口出来前能通过另一种方式来实现滤镜功能，这种老方式是先把图片上传到一个远程服务器上，然后服务器通过后台脚本的图形处理库来对图片进行像素点数据修改（比如php的gd图形库），然后再把处理好的图片存在服务器上，之后小程序通过download file的接口去下载。

这种方式把像素处理的逻辑交给后台服务器，而现在有了文章开头提到的两个新接口后，可以把这部分处理逻辑交给小程序前端。

四.为啥呢？

把沉重的处理逻辑都交给远程服务器做，首先图片需要传来传去，速度慢是必然的了，而且不大稳定；再有就是像素级处理逻辑交给后台服务器做，后台服务器的运行压力会很大。

但换成上述提到的小程序接口实现方式就不一样了。

即使算法信息存在服务器，因为算法本身数据量不大，传递给用户各自的手机时所耗时间成本也不高，自然速度就会快；然后像素点的逻辑运算压力分摊给各个用户的手机，那自然服务器就不用承载过多的运算负荷。

如果算法不做强硬的加密，还能直接存储在小程序前端，这样连跟服务器的交互都免了，体验会非常快。

所以，这接口在极大限度地降低开发者运营成本（服务器图形计算很耗资源）和开发门槛的同时，能使得前端交互体验更好。

这算是填补了小程序对图像分析的缺口，未来一定还有更多的应用场景，想象一下AI图像分析和OCR文本分析都能直接在小程序的前端上做时，作为前端开发的同学应该会有点兴奋。

最后花叔在想...小程序现在是已经做到了图片的像素点分析和处理，那么视频帧的像素点分析和处理应该也快了吧？

然后....AR满足条件了...

还是挺期待的。

思维导图高级版小程序寻求公众号绑定，APPID为： wx368bd706303f88b6，公众号可在mp后台直接进行绑定，花叔会第一时间确认。