JavaScript通过canvas和ImageData可实现图像处理，需先加载图片、绘制到canvas、用getImageData获取像素数据，遍历修改后putImageData写回；注意跨域、性能及抗锯齿问题。
JavaScript 本身不直接提供图像处理的高级 API，但通过 元素配合 CanvasRenderingContext2D 和 ImageData 对象，可以完整读取、修改和写回像素数据，实现基础到中等复杂度的图像处理（如灰度化、边缘检测、滤镜、缩放等）。
获取图像的像素数据
要操作像素，必须先把图片绘制到 canvas 上，再用 getImageData() 提取原始 RGBA 数据：
- 确保图像已加载完成（监听
img.onload），否则 canvas 绘制会失败 - 用
ctx.drawImage(img, 0, 0)把图像画到 canvas 上 - 调用
ctx.getImageData(0, 0, width, height)得到ImageData实例 -
imageData.data是一个Uint8ClampedArray，每 4 个连续元素代表一个像素的 R、G、B、A 值（范围 0–255）
遍历并修改单个像素
像素数组是按行优先排列的一维数组。例如宽 100、高 100 的图，第 (x, y) 像素对应索引为 (y * width + x) * 4：
- R 值位置：
i - G 值位置：
i + 1 - B 值位置：
i + 2 - A 值位置：
i + 3 - 修改后需调用
ctx.putImageData(imageData, 0, 0)才能在画布上看到效果
示例：转灰度（加权平均法）
立即学习“Java免费学习笔记（深入）”；
const data = imageData.data;
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;
}注意性能与限制
直接操作 Uint8ClampedArray 是高效方式，但大量像素循环在主线程可能卡顿：
- 对大图（如 >2000×2000）建议用
OffscreenCanvas（Worker 中处理）或 WebAssembly 加速 - 避免在循环里频繁读写
data.length，应提前缓存 -
跨域图片需设置
img.crossOrigin = 'anonymous'，否则getImageData会报安全错误 - Canvas 默认抗锯齿可能导致采样偏差，必要时可设
ctx.imageSmoothingEnabled = false
进阶替代方案
若需更强大能力（卷积、FFT、WebGL 加速）：
- TensorFlow.js：支持基于 WebGL 的 GPU 图像处理，内置 resize、crop、color space 转换等
- sharp（Node.js）：服务端首选，不适用于浏览器
- WASM 库（如 wasm-cv）：接近原生速度，适合复杂算法
- WebGL + 自定义 shader：适合实时滤镜、特效，学习成本较高
基本上就这些。浏览器内做图像处理，核心就是 canvas + ImageData；关键在于理解像素布局、注意跨域和性能边界。
