用JS写一个替换/修改图片颜色值的工具（1）

本文链接：https://blog.csdn.net/Highning0007/article/details/136180648

本文介绍了作者开发的一个小工具，用于在Photoshop之外实现颜色值的精确选择和替换，通过JavaScript操作图片像素数据，展示了核心代码并分享了实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

PS软件里也有这个功能,但是总感觉用不习惯,并且也没法精准挑选要更换其中哪一个颜色值

于是就自己写一个小工具来实现这个功能.

PS:也可能是我本人不是很熟悉PS软件的原因

一、第一步，先将图片读取出来

先随便改一下图片的颜色，达到效果，能改，并且能将修改后的图片完整保存下来，第一步的工作已完成，接下来下一篇再继续增加选择替换颜色值的功能。

核心的代码如下：


            // 将源图片复制到画布上
            ctx.drawImage(img, 0, 0, width, height);
            // 获取画布的像素信息
            let imageData = ctx.getImageData(0, 0, width, height), data = imageData.data;
            // 对像素集合中的单个像素进行循环，每个像素是由4个通道组成，所以要注意
            let i = 0;
            while (i < data.length) {
                let r = data[i++],
                    g = data[i++],
                    b = data[i++],
                    a = data[i++];

                //计算透明度
                let alp = (255 - r) / (255 - threshold);
                //判断是否透明
                //let isTransparent = (r == 255 && g == 255 && b == 255 && a == 255);
                let isTransparent = (r == 0 && g == 0 && b == 0 && a == 0);
                if (isTransparent) {//透明值不处理
                    //console.log('========',data);
                    //data[i - 1] = 0;
                } else {

                    //console.log('========',r);
                    //console.log('========',g);
                    //console.log('========',b);
                    //console.log('========',a);
                    //console.log('********************************');
                    data[i - 4] = newR;
                    //data[i - 3] = newG;
                    //data[i - 2] = newB;
                    //data[i - 1] = a !== 255 ? 255 - a : alp * 255; //处理透明的图片和不透明的图片
                }
            }
            // 将修改后的代码复制回画布中
            ctx.putImageData(imageData, 0, 0);
            // 图片导出为 png 格式
            let imgType = "png";
            let imgData = canvas.toDataURL(imgType);
            console.log(imgData); // 生成base64
            //callback && callback(imgData);

            var resultElement = document.getElementById('cropped-result');
            resultElement.src = imgData;

这个小工程也先上传到资源库里：

https://download.csdn.net/download/Highning0007/88852282