javascript改变图片颜色

js实现图片颜色转换

要求：根据不同的状态，图片显示不同的颜色
实现代码如下：

		/**
         * 将png图片转成目标颜色
         * @param imgUrl 可传入图片URL 或者 Base64
         * @param RGBArr 要换成的目标颜色RGB 数组格式[R,G,B]
         * @param Functon callback回调
         */
         const changeImageColor = (imgUrl, RGBArr,callback)=> {
            let threshold = -15; //默认颜色阀值 为 255 －>和默认图相关
            let image = new Image();
            image.setAttribute("crossOrigin",'anonymous');
            image.src = imgUrl;
            image.onload = function () {
                let width = image.width, height = image.height,canvas = 						document.createElement("canvas"),ctx = canvas&&canvas.getContext("2d");
                canvas.width = width;
                canvas.height = height;
                // 将源图片复制到画布上
                ctx.drawImage(image, 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;
                    if (isTransparent||a <= 0) {
                        data[i - 1] = 0;
                    } else {
                        data[i - 4] = RGBArr[0];
                        data[i - 3] = RGBArr[1];
                        data[i - 2] = RGBArr[2];
                        //如果不透明则用255-a
                        data[i - 1] = a !== 255 ?  a : alp * 255; //处理透明的图片和不透明的图片
                    }
                }
                // 将修改后的代码复制回画布中
                ctx.putImageData(imageData, 0, 0);
                // 图片导出为 png 格式
                let imgType = "png";
                let imgData = canvas.toDataURL(imgType);
                callback && callback(imgData);
            };
            return image.src;
        }