HTML5图片处理技巧与实现方法

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);

• 应用灰度滤镜：

  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;     // R
    imageData.data[i+1] = avg;   // G
    imageData.data[i+2] = avg;   // B
  }
  ctx.putImageData(imageData, 0, 0);
      

• 调整亮度：

  function adjustBrightness(value) {
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
      data[i] += value;     // R
      data[i+1] += value;   // G
      data[i+2] += value;   // B
    }
    ctx.putImageData(imageData, 0, 0);
  }
      

• 裁剪指定区域：

  ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh);

  其中(sx,sy)为源图起点，(sw,sh)为裁剪尺寸。
• 缩放图片：

  ctx.drawImage(img, 0, 0, newWidth, newHeight);

// 导出为PNG Base64 URL
const dataURL = canvas.toDataURL('image/png');

// 或导出为JPEG（带质量参数）
const jpegURL = canvas.toDataURL('image/jpeg', 0.8);

// 创建下载链接
const link = document.createElement('a');
link.href = dataURL;
link.download = 'edited-image.png';
link.click();