小程序canvas实现图片粒子化效果

最近在研究小程序的canvas画布，所以做了一个小功能跟大家分享一下，希望大家能多多关注，你的关注是我写文章的动力

上面是原图，下面是粒子化

要实现这个功能最重要的是要使用到一个属性是小程序api画笔里面的 canvasGetImageData这个函数

wx.canvasGetImageData(Object object, Object this)​developers.weixin.qq.com/miniprogram…

有以下这些参数，其中最重要的就是x，y，width，height这四个参数，设置这四个参数就能获取canvas你像要的像素信息

回调函数中data就是我们实现这个功能需要的数据了，它返回的是你所选区域的像素信息，是一个数组类型。

data里面每四个为一组，代表一个像素

它们有四方面的信息，即 RGBA 值：

R - 红色（0-255）
G - 绿色（0-255）
B - 蓝色（0-255）
A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）

原理

有了以上的信息后，我们就大概有了完成这个功能的思路了。

第一步：我们先选择图片并获取图片的信息初始化画布，然后将图片画在画布上

第二步：然后在用canvasGetImageData函数获取画布的像素信息

第三步：我声明了gap这个属性，作用是每隔两个像素取点，然后将位置x，y，颜色信息都存储在newArr数组里

let gap = 8;
for (var x = 0; x < res.width; x += gap) {
	for (var y = 0; y < res.height; y += gap) {
		var i = (y * res.width + x) * 4;
			newArr.push({
				x:x,
				y:y,
				color:`rgba(${res.data[i]},${res.data[i+1]},${res.data[i+2]},${res.data[i+3]})`
		})					
	}
}

第四步：将newArr数组循环，根据位置和颜色信息在画布上画矩形，这一步你也可以画成圆形

let radius = 6;
ctx.clearRect(0, 0, this.imgData.width, this.imgData.height);
for(let i =0;i<newArr.length;i++){			
	ctx.setFillStyle(newArr[i].color)
	ctx.fillRect((newArr[i].x*1),(newArr[i].y*1),radius, radius);
}

这样大概的功能就完成的差不多，这只是一个简单的功能，大家可以用这些像素信息进行更多的操作例如转灰度，改变颜色，改变透明度，或是给它加上动画效果，让它酷炫起来。在最后我会附上我的代码（是用uniapp框架写的小程序），大家可以看看，不过我写的比较乱没有整理，大家包涵一下

大家有什么问题或是建议也可以发在评论里面，最后谢谢大家观看