通过画布canvas实现图片黑白化

最新推荐文章于 2023-10-19 16:59:06 发布

wkc1203

最新推荐文章于 2023-10-19 16:59:06 发布

阅读量987

点赞数

分类专栏： html5 文章标签： canvas html5

本文链接：https://blog.csdn.net/wkc1203/article/details/105415576

版权

本文介绍了如何通过HTML5的canvas元素将彩色图片转化为黑白图片。首先获取canvas的2D绘图上下文，然后利用getImageData方法获取图像数据，遍历每一个像素点，计算红色、绿色、蓝色的平均值，并将这三种颜色通道的值都设置为这个平均值，从而实现黑白化。最后，通过putImageData将处理后的数据放回canvas。

摘要由CSDN通过智能技术生成

图片是由一个个的像素点组成的，而每一个像素点都是由三原色（red,green,blue）加透明度(alpha)来组成。所以说如果我们希望改变图像的图像数据，其实就是改变图像每一个像素点的数据。

首先创建canvas对象，canvas对象提供了 2D、3D两种绘图方式，这里我们使用2D绘图
使用 context2d = drawing.getContext('2d'); 方法获得context2d对象。微信小程序通过wx.createCanvasContext创建canvas对象，拿到context2d对象之后，我们通过context2d提供的方法getImageData(),来获取图像数据，微信通过wx.getImageInfo，getImageData()有4个参数，分别表示画面区域的 x 和 y 坐标以及该区域的像素宽度和高度 var imagedata = context2d.getImageData(0, 0, image.width, image.height);
ImageData 对象都有三个属性:width、height 和
data。其中 data 属性是一个数组，保存着图像中每一个像素的数据。并通过，red，green，blue，alpha来表示。我们如果想要改变图像的图像数据，就需要改变 imagedata的data属性数据，改变 red，green，blue，alpha 的值。

var imagedata = context2d.getImageData(0, 0, image.width, image.height);

var data = imagedata.data;

let i,len,red,green,blue,alpha,average;

for (i