js 获取图像灰度

function convertToGrayscale(image) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 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 gray = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
        data[i] = data[i + 1] = data[i + 2] = gray; // 设置RGB通道为灰度值
        // data[i + 3] 是 alpha 通道，保持不变
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas.toDataURL(); // 返回灰度图像的DataURL
}

// 使用示例
const img = new Image();
img.src = 'path/to/image.jpg';
img.onload = function() {
    const grayscaleImage = convertToGrayscale(img);
    // grayscaleImage 现在是灰度图像的DataURL，可以用于显示或下载
};