n梦冰 2021-12-05 22:38 采纳率: 100%
浏览 75
已结题

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);
现在用这种方式有问题,改变主题色,图片颜色变化也是错的。



  • 写回答

2条回答 默认 最新

  • 前端阿彬 前端领域新星创作者 2021-12-05 23:03
    关注

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

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 2月18日
  • 已采纳回答 2月10日
  • 创建了问题 12月5日

悬赏问题

  • ¥15 神经网络预测均方误差很小 但是图像上看着差别太大
  • ¥15 Oracle中如何从clob类型截取特定字符串后面的字符
  • ¥15 想通过pywinauto自动电机应用程序按钮,但是找不到应用程序按钮信息
  • ¥15 如何在炒股软件中,爬到我想看的日k线
  • ¥15 seatunnel 怎么配置Elasticsearch
  • ¥15 PSCAD安装问题 ERROR: Visual Studio 2013, 2015, 2017 or 2019 is not found in the system.
  • ¥15 (标签-MATLAB|关键词-多址)
  • ¥15 关于#MATLAB#的问题,如何解决?(相关搜索:信噪比,系统容量)
  • ¥500 52810做蓝牙接受端
  • ¥15 基于PLC的三轴机械手程序