在Microsoft Edge中使用画布上下文调整图像的亮度

<canvas id="myCanvas" width="500" height="500"></canvas>

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

const image = new Image();
image.src = "path/to/image.jpg";

image.onload = function() {
  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) {
  // 获取像素的RGB值
  const red = data[i];
  const green = data[i + 1];
  const blue = data[i + 2];

  // 计算亮度值
  const brightness = (red + green + blue) / 3;

  // 调整亮度
  data[i] = brightness; // 红色通道
  data[i + 1] = brightness; // 绿色通道
  data[i + 2] = brightness; // 蓝色通道
}

// 将修改后的像素数据重新绘制到画布上
ctx.putImageData(imageData, 0, 0);