js改变图片颜色,不改变图片的纹路

现在我改变主题颜色来改变图片颜色,图片不是纯色照片,就是拍的照片,需要不改变图片的样子纹路,只改变图片的色调。
//图片加载后进行处理

mg.onload = function () {
                console.log("wojinlaile");
                let width = img.width, height = img.height,canvas = document.createElement("canvas"),ctx = canvas.getContext("2d");
                canvas.width = width;
                canvas.height = height;
                // 将源图片复制到画布上
                ctx.drawImage(img, 0, 0, width, height);
                // 获取画布的像素信息
                let imageData = ctx.getImageData(0, 0, width, height),data = imageData.data;
                // 对像素集合中的单个像素进行循环,每个像素是由4个通道组成,所以要注意
            
                for(var i = 0; i < data.length; i+=4){
                    data[i] = 255 - data[i]; //r
                    data[i+1] = 255 - data[i+1]; //g
                    data[i+2] = 255 - data[i+2]; //b
                }
                // 将修改后的代码复制回画布中
                ctx.putImageData(imageData, 0, 0);
                // 图片导出为 png 格式
                let imgType = "png";
                let imgData = canvas.toDataURL(imgType);
                 console.log(imgData); // 生成base64
                callback && callback(imgData);
现在用这种方式有问题,改变主题色,图片颜色变化也是错的。



可以用css3的filter设置滤镜,可以参考下我写的博客

https://blog.csdn.net/qq_38974163/article/details/120343022
如有帮助,望采纳^O^谢谢啦

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632