js改变图片底色方法

图片底色修改方法

    var changeImageColor = (imgUrl, color = "232, 217, 134", callback) => {
        let threshold = 114; //默认颜色阀值 为 114 －>和默认图相关
        let img = new Image();
        img.src = imgUrl;
        // 参数为rgb方式
        let newR = parseInt(color.split(',')[0]);
        let newG = parseInt(color.split(',')[1]);
        let newB = parseInt(color.split(',')[2]);
        // 参数为HEX方式 '#000000'
        // let newR = parseInt("0x" + color.substr(1, 2));
        // let newG = parseInt("0x" + color.substr(3, 2));
        // let newB = parseInt("0x" + color.substr(5, 2));
        //图片加载后进行处理
        img.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个通道组成，所以要注意
          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) {
              data[i - 1] = 0;
            } else {
                // console.log(newR,newG,newB); 4 3 2 分别代表颜色rgb，可通过这个判断要修改的颜色区域
                if (data[i - 4] == parseInt('0xf7') && data[i - 3] == parseInt('0xab') && data[i - 2] == parseInt('0x29')) {
                    // return
                }else{
                    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);
        };
        return img;
    }