js获取图片的颜色

// 创建一个Image对象
const img = new Image();
img.crossOrigin = "Anonymous"; // 处理跨域图片

// 设置图片加载完成后的回调函数
img.onload = function() {
    // 创建一个Canvas元素
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 设置Canvas的尺寸与图片相同
    canvas.width = img.width;
    canvas.height = img.height;

    // 将图片绘制到Canvas上
    ctx.drawImage(img, 0, 0);

    // 获取图片的像素数据
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // 遍历像素数据，提取颜色信息
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        const a = data[i + 3];

        // 这里可以处理每个像素的颜色值，例如计算主要颜色
        console.log(`Red: ${r}, Green: ${g}, Blue: ${b}, Alpha: ${a}`);
    }
};

// 设置图片源
img.src = 'path/to/your/image.jpg';