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

Question

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

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);

现在用这种方式有问题，改变主题色，图片颜色变化也是错的。

Answer 1

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

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