JavaScript如何实现图像处理_JavaScript Canvas如何调整图片亮度与对比度

JavaScript Canvas API 可通过 getImageData() 获取像素数组并实时调整亮度与对比度：亮度为 RGB 同加偏移量并截断；对比度用 (value−128)×factor+128 公式计算，需确保图像跨域安全且已加载。

JavaScript 中通过 Canvas API 可以直接操作图像像素，实现亮度与对比度的实时调整，无需后端或第三方库。

获取图像像素数据

使用 ctx.getImageData() 读取画布上图像的原始 RGBA 像素数组。该数组是按行优先排列的一维 Uint8ClampedArray，每 4 个元素代表一个像素（R、G、B、A）。

• 确保图像已加载完成且跨域安全（如使用 crossOrigin="anonymous"）
• 调用 getImageData(0, 0, width, height) 获取全部像素
• 注意：该操作受同源策略限制，外链图片需服务端支持 CORS

调整亮度（Brightness）

亮度调整本质是对 R、G、B 三个通道统一加减偏移量。偏移量范围通常为 -255 到 +255，超出 [0, 255] 时自动截断（Uint8ClampedArray 自动处理）。

• 设 brightness = 30，则对每个像素的 r、g、b 分别执行：r += brightness; g += brightness; b += brightness;
• 避免直接修改原 data 数组中的 alpha（第 4 个值），否则影响透明度
• 推荐封装为函数，接收 ImageData 和 brightness 参数并返回新 ImageData

调整对比度（Contrast）

对比度调整基于公式：value = (value - 128) * factor + 128，其中 factor > 1 增强对比，0

• 对每个 R/G/B 值独立计算，alpha 不参与
• factor 推荐用浮点数（如 1.2、0.8），可用滑块实时控制
• 注意：乘法可能导致溢出，但 Uint8ClampedArray 会自动钳制到 [0,255]
• 可合并亮度与对比度：先对比度变换，再加亮度偏移，效果更自然

写回画布并显示

修改完像素后，用 ctx.putImageData() 将新数据渲染到画布。为防止模糊或缩放失真，建议：

• 保持 canvas 尺寸与原始图像一致（canvas.width = img.naturalWidth 等）
• 清除画布（ctx.clearRect(0,0,w,h)）后再绘制
• 若需保存结果，可用 canvas.toDataURL('image/png') 导出 base64