如何在边缘浏览器中调整图像亮度

<canvas id="myCanvas"></canvas>

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

var image = new Image();
image.src = "image.jpg"; // 替换为你的图像路径
image.onload = function() {
  ctx.drawImage(image, 0, 0);
};

function adjustBrightness(value) {
  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = imageData.data;

  for (var i = 0; i < data.length; i += 4) {
    // 获取像素的RGB值
    var red = data[i];
    var green = data[i + 1];
    var blue = data[i + 2];

    // 调整亮度
    red += value;
    green += value;
    blue += value;

    // 确保RGB值在0-255范围内
    red = Math.max(0, Math.min(255, red));
    green = Math.max(0, Math.min(255, green));
    blue = Math.max(0, Math.min(255, blue));

    // 更新像素的RGB值
    data[i] = red;
    data[i + 1] = green;
    data[i + 2] = blue;
  }

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

<input type="range" min="-255" max="255" value="0" oninput="adjustBrightness(this.value)">