更多内容请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com前言图片加工现在已经成为我们生活中的刚需，想必每个人都经常有这种需求。在实际的前端业务中，往往有很多项目需要进行图像处理和处理。本文基于javascript，使用html5+cavans实现多种常用滤镜效果，并封装成可调用的js文件（filter.js），支持图片本地存储。效果展示及实现思路我们知道，每张图片都是由若干个像素点组成的，得到的像素点是一个数组，颜色由RGBA组成，所以数组中每4个点组成一个颜色值，需要分别实现filter对于特效，需要定期改变像素值。当我们通过ctx.drawImage()方法获取图片并绘制到cavans中时，我们可以通过ctx.getImageData()方法获取图片数据。然后就可以使用filter.js调用方法来实现滤镜效果了。Cavans前期准备1.获取cavansletfilterCavans=document.getElementById("filterCavans");filterCavans.width=img.clientWidth;filterCavans.height=img.clientHeight;2.获取二维上下文对象ctx=filterCavans.getContext("2d");3.给cavans画图letimg=document.getElementById("img");ctx.drawImage(img,0,0,img.clientWidth,img.clientHeight);4.获取在cavans上绘制的图片数据canvasData=ctx.getImageData(0,0,filterCavans.width,filterCavans.height);原理与实现1.黑白调原理：判断当前像素点的RGB值是否大于255的一半，大于则设置为255，小于则设置为255全部setto0blackWhite(imageData){//该区域图像的像素集letdata=imageData.data;for(leti=0;i
