js判断图片某坐标位置的颜色深浅

根据canvas中 getImageData() 方法拿到图片信息；
计算是不是灰度 阈值越高 越亮，反之判断为暗色。

// 判断图片x:10,y:10坐标的颜色深浅
const getColor = (url: any) => {
  let image: any = new Image();
  image.setAttribute("crossOrigin", " ");
  const canvas = document.createElement("canvas");
  image.src = url;
  image.onload = (e) => {
    const ctx = canvas.getContext("2d");
    // 设置canvas尺寸
    canvas.width = image.width;
    canvas.height = image.height;
    // 绘制图片到canvas中
    ctx.drawImage(image, 0, 0);
    // 获取canvas中的图片数据 x:10,y:10
    const data = ctx.getImageData(10, 10, 1, 1).data;
    let grayLevel = data[0] * 0.299 + data[1] * 0.587 + data[2] * 0.114;
    if (grayLevel >= 192) {
      console.log('light')
    } else {
      console.log('dark')
    }
  };
};

方法传参图片url地址