获取图片的像素信息

如何获取图片的像素信息呢？这个得借助canvas的getImageData方法。

    const canvas = document.createElement('canvas'); 
    const ctx = canvas.getContext('2d');
    //将图片加载到canvas中
    const image = new Image();
    image.src = '1.png';
    image.onload = () => {
        ctx.drawImage(image, 0, 0);//获取像素矩阵 
        let imageData  = ctx.getImageData(0, 0, canvas.width, canvas.height);
        let data = imageData.data;
        console.log('imageData>>>',data);
        for(let i = 0;i < data.length;i+=4) {
            let red = data[i];
            let green = data[i+1];
            let blue = data[i+2];
            let alpha = data[i+3];
            
        }
    }

其中：
R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)
这里需要注意的是，alpha的取值范围不是0~1。