JavaScript Canvas Grayscale

在 JavaScript 中，我们可以使用 Canvas API 来将图片转换为灰度图像。

实现思路

将每个像素的 RGB 值都设置为 R = G = B = (R + G + B) / 3。

代码示例

// 获取 Canvas 和 Image 元素
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("image");

// 创建 ImageData 对象
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

// 将像素转换为灰度
for (let i = 0; i < imageData.data.length; i += 4) {
  const avg = (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]) / 3;
  imageData.data[i] = avg;
  imageData.data[i + 1] = avg;
  imageData.data[i + 2] = avg;
}

// 在 Canvas 上显示灰度图像
ctx.putImageData(imageData, 0, 0);

注意事项

由于跨域安全策略的限制，如果要将来自不同域的图像转换为灰度图像，需要在服务器端进行处理并发送允许跨域的 CORS 头。