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
立即学习“Java免费学习笔记（深入）”；
- 对每个 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
