JavaScript_Canvas图像处理与滤镜

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'example.jpg';
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
}

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data; // data 是 [R, G, B, A, R, G, B, A, ...]

for (let i = 0; i < data.length; i += 4) {
  const avg = (data[i] + data[i+1] + data[i+2]) / 3;
  data[i]     = avg; // Red
  data[i+1]   = avg; // Green
  data[i+2]   = avg; // Blue
}
ctx.putImageData(imageData, 0, 0);

for (let i = 0; i < data.length; i += 4) {
  data[i]     = 255 - data[i];     // Red
  data[i+1]   = 255 - data[i+1];   // Green
  data[i+2]   = 255 - data[i+2];   // Blue
}
ctx.putImageData(imageData, 0, 0);

function adjustBrightness(data, value) {
  for (let i = 0; i < data.length; i += 4) {
    data[i]     = Math.min(255, Math.max(0, data[i] + value));
    data[i+1]   = Math.min(255, Math.max(0, data[i+1] + value));
    data[i+2]   = Math.min(255, Math.max(0, data[i+2] + value));
  }
}
// 使用：adjustBrightness(data, 50); // 提亮

const outputUrl = canvas.toDataURL('image/png');
document.getElementById('output').src = outputUrl;