js十六进制转rgb，检测图片中是否存在指定颜色的内容

// 十六进制转rgb
function colorRgb(sColor){
    sColor = sColor.toLowerCase();
    //十六进制颜色值的正则表达式
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    // 如果是16进制颜色
    if (sColor && reg.test(sColor)) {
        if (sColor.length === 4) {
            var sColorNew = "#";
            for (var i=1; i<4; i+=1) {
                sColorNew += sColor.slice(i, i+1).concat(sColor.slice(i, i+1));    
            }
            sColor = sColorNew;
        }
        //处理六位的颜色值
        var sColorChange = [];
        for (var i=1; i<7; i+=2) {
            sColorChange.push(parseInt("0x"+sColor.slice(i, i+2)));    
        }
        return sColorChange;
    }
    return sColor;
};
// 检测图片是否完整，颜色是否与设置的统一
// 传入的checkWidth如果太小或同时画布内容写的太小可能识别不到
function checkUploadImg(url, setColor, checkWidth, resolve) {
  console.log(url);
  var setColorArr = colorToRgb(setColor);
  var checkFlag = false;
  var checkCanvas = document.createElement("canvas");
  var checkCanvased = checkCanvas.getContext("2d");
  checkCanvas.width = checkWidth * 1;
  checkCanvas.height = checkWidth * 1;
  var image = new Image();
  image.src = url;
  var timer5 = setInterval(function () {
    // console.log('img.complete',img.complete)
    if (image.complete) {
      //判断图片是否加载完成
      clearInterval(timer5);
      //图片加载完成，写入对应的请求
      // image.src = url;
      console.log(checkWidth);
      console.log("checkWidth");
      checkCanvased.drawImage(image, 0, 0, checkWidth * 1, checkWidth * 1);
      console.log(checkCanvas.toDataURL());
      var checkImageData = checkCanvased.getImageData(
        0,
        0,
        checkWidth * 1,
        checkWidth * 1
      );
      var checkImageDataArr = checkImageData.data;
      if (checkImageDataArr.length < 0) {
        resolve(checkFlag);
        return;
      }
      for (let i = 0; i < checkImageDataArr.length; i++) {
        var arrItem0 = checkImageDataArr[i];
        var arrItem1 = checkImageDataArr[i + 1];
        var arrItem2 = checkImageDataArr[i + 2];
        var arrItem3 = checkImageDataArr[i + 3];
        if (
          (setColorArr[0] == arrItem0 ||
            setColorArr[1] == arrItem1 ||
            setColorArr[2] == arrItem2) &&
          arrItem3 >= 1
        ) {
          checkFlag = true;
          break;
        }
      }
      resolve(checkFlag);
    }
  }, 50);
  collectionTimer[5] = timer5;
}

checkUploadImg优化

function checkUploadImg(url, setColor, checkWidth, resolve) {
  var setColorArr = colorToRgb(setColor);
  var checkFlag = false;
  var checkCanvas = document.createElement("canvas");
  var checkCanvased = checkCanvas.getContext("2d");
  checkCanvas.width = checkWidth * 1;
  checkCanvas.height = checkWidth * 1;
  var image = new Image();
  image.src = url;
  if (image.complete) {
    checkRes();
  } else {
    image.onload = function () {
      checkRes();
      image.onload = null;
    };
  }
  function checkRes() {
    checkCanvased.drawImage(image, 0, 0, checkWidth * 1, checkWidth * 1);
    console.log(checkCanvas.toDataURL());
    var checkImageData = checkCanvased.getImageData(
      0,
      0,
      checkWidth * 1,
      checkWidth * 1
    );
    var checkImageDataArr = checkImageData.data;
    if (checkImageDataArr.length < 0) {
      resolve(checkFlag);
      return;
    }
    for (let i = 0; i < checkImageDataArr.length; i++) {
      var arrItem0 = checkImageDataArr[i];
      var arrItem1 = checkImageDataArr[i + 1];
      var arrItem2 = checkImageDataArr[i + 2];
      var arrItem3 = checkImageDataArr[i + 3];
      if (
        (setColorArr[0] == arrItem0 ||
          setColorArr[1] == arrItem1 ||
          setColorArr[2] == arrItem2) &&
        arrItem3 >= 1
      ) {
        checkFlag = true;
        break;
      }
    }
    resolve(checkFlag);
  }
}

checkUploadImg优化
function checkUploadImg(url, setColor, checkWidth, resolve) {
  var setColorArr = colorToRgb(setColor);
  var checkFlag = false;
  var checkCanvas = document.createElement("canvas");
  var checkCanvased = checkCanvas.getContext("2d");
  checkCanvas.width = checkWidth * 1;
  checkCanvas.height = checkWidth * 1;
  var image = new Image();
  image.src = url;
  if (image.complete) {
    checkRes();
  } else {
    image.onload = function () {
      checkRes();
      image.onload = null;
    };
  }
  function checkRes() {
    checkCanvased.drawImage(image, 0, 0, checkWidth * 1, checkWidth * 1);
    console.log(checkCanvas.toDataURL());
    var checkImageData = checkCanvased.getImageData(
      0,
      0,
      checkWidth * 1,
      checkWidth * 1
    );
    var checkImageDataArr = checkImageData.data;
    if (checkImageDataArr.length < 0) {
      resolve(checkFlag);
      return;
    }
    for (let i = 0; i < checkImageDataArr.length; i++) {
      var arrItem0 = checkImageDataArr[i];
      var arrItem1 = checkImageDataArr[i + 1];
      var arrItem2 = checkImageDataArr[i + 2];
      var arrItem3 = checkImageDataArr[i + 3];
      if (
        (setColorArr[0] == arrItem0 ||
          setColorArr[1] == arrItem1 ||
          setColorArr[2] == arrItem2) &&
        arrItem3 >= 1
      ) {
        checkFlag = true;
        break;
      }
    }
    resolve(checkFlag);
  }
}