JavaScript图像处理_像素操作与滤镜效果实现

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'path/to/your/image.jpg';
img.onload = function() {
  canvas.width = this.width;
  canvas.height = this.height;
  ctx.drawImage(this, 0, 0);
<p>// 获取像素数据
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data; // data是Uint8ClampedArray，包含RGBA值
}</p>

for (let i = 0; i < data.length; i += 4) {
  const r = data[i];
  const g = data[i + 1];
  const b = data[i + 2];
  const gray = 0.299 * r + 0.587 * g + 0.114 * b;
  data[i] = data[i + 1] = data[i + 2] = gray;
}

for (let i = 0; i < data.length; i += 4) {
  data[i] = 255 - data[i];     // R
  data[i + 1] = 255 - data[i + 1]; // G
  data[i + 2] = 255 - data[i + 2]; // B
}

const brightness = 50; // 正数提亮，负数变暗
for (let i = 0; i < data.length; i += 4) {
  data[i] += brightness;
  data[i + 1] += brightness;
  data[i + 2] += brightness;
}

ctx.putImageData(imageData, 0, 0);
// 此时canvas已显示处理后的图像

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