uni小程序canvas实现图像灰度和透明化

在小程序原生中也一样，只不过uni改成wx

不管是在uni还是在原生都要指定 canvas  2d类型，如果不指定类型的话，透明化会有问题。

 初始化完成以后通过 getImageData属性获取到画布中每一个像素的rgba值

灰度值

const data = this.ctx.getImageData(0,0 ,width, height)

let value = 0

for (let i = 0; i < data.length; i+=4) {
    // 灰度值 = (r+g+b) / 3  rgb的平均值就是灰度值, 这个最后的3是可以调整的，可以实现深度和浅度

    value = Math.floor((data[i]+data[i+1]+data[i+2]) / 3);

    data[i] = data[i+1] = data[i+2] = value;

}

// 清空画布 重新添加
this.ctx.clearRect(0, 0, width, height);
this.ctx.putImageData(data, 0, 0)

透明化（如果canvas没有配置type类型的情况下，修改data[i+3] = 0是不会透明的, 需要对rgba都做修改）

const num = 220。// 可以通过某个交互实现画布中哪些颜色要透明哪些不需要透明
for (let i = 0; i < data.length; i+=4) {
	if(data[i] >= num && data[i+1] >= num && data[i+2] >= num) {
		data[i+3] = 0  // 将rgba的。a = 0 就实现透明
        /**
            如果没有给canvas设置类型，需要对rgba都做处理
            data[i] = data[i+1] = data[i+2] = 0;
			data[i+3] = -1
        */
	}
}