700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > uni小程序canvas实现图像灰度和透明化

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

时间:2021-03-01 08:19:27

相关推荐

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

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

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

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

灰度值

const data = this.ctx.getImageData(0,0 ,width, height)let value = 0for (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*/}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。