TS 使用Canvas获取鼠标点击处颜色

最近使用使用到这个东西，好久不用都快忘了，记录下 

<canvas #t id="canvas" class="shadow-6 radius" (click)="getColor($event, t)"></canvas>

 首先呢，如果现在canvas上绘制某些图，就直接使用下面的方法

const img = new Image();
img.src = 'imgUrl e.g localhost:9000/xxx.png';
img.onload = function () {
    const canvas = document.getElementById('canvas') as any;
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
};

ctx.drawImage(this, 0, 0, canvas.width, canvas.height);

比下面这种写法的优势就是，这样可以使图片自动缩放完整填充到canvas里面。

ctx.drawImage(this, 0, 0);

 下面的代码就可以获取出鼠标点击处，canvas内部颜色的参数了

  getColor(cursor: any, t: any): void {
    t.__proto__.getPixelColor = function (x: any, y: any) {
      const thisContext = this.getContext('2d');
      const imageData = thisContext.getImageData(x, y, 1, 1);
      const pixel = imageData.data;
      const rs = pixel[0];
      const gs = pixel[1];
      const bs = pixel[2];
      let as = pixel[3] / 255;
      as = Math.round(as * 100) / 100;
      let rHex = rs.toString(16);
      rs < 16 && (rHex = '0' + rHex);
      let gHex = gs.toString(16);
      gs < 16 && (gHex = '0' + gHex);
      let bHex = bs.toString(16);
      bs < 16 && (bHex = '0' + bHex);
      const rgbaColor = 'rgba(' + rs + ',' + gs + ',' + bs + ',' + as + ')';
      const rgbColor = 'rgb(' + rs + ',' + gs + ',' + bs + ')';
      const hexColor = '#' + rHex + gHex + bHex;
      return {
        rgba: rgbaColor,
        rgb: rgbColor,
        hex: hexColor,
        r: rs,
        g: gs,
        b: bs,
        a: as,
      };
    };
    const color = t.getPixelColor(cursor.offsetX, cursor.offsetY / 2);
    // eslint-disable-next-line no-console
    console.log(color);
}

至于最后为什么使用 offsetY/2呢，我的另一篇blog写了原因并且解释了这样做法。
Canvas 使用鼠标坐标getImageData(x, y, 1, 1) 获取图像颜色时候 下半部分图像全为rgb(0,0,0) 解决方案_Damien_J_Scott的博客-CSDN博客

或者使用robotjs

robotjs - npm