js修改图片颜色

  /**
   * 根据主题颜色修改图片颜色
   * @param  {[type]}   imgUrl    图片url
   * @param  {[type]}  color 主题颜色
   * @param  {Function} callback  返回值 返回base64
   */
   changeImageColor = (imgUrl, color = "#00ff7f", callback) => {
    let threshold = 114; //默认颜色阀值 为 114 －>和默认图相关
    let img = new Image();
    img.src = imgUrl;
    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 {
          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;
  },
    //使用方式 其中 data、style 为通过api读取的值
    this.changeImageColor("./img/2.png", "#f51ca6", (imgData) => {
      console.log(imgData);
    });