Canvas图像处理核心是手动操作ImageData.data数组；跨域导致getImageData报错需服务端配CORS或本地启服务；单像素修改用index=(ywidth+x)4定位；drawImage与globalCompositeOperation顺序决定合成效果；性能瓶颈在getImageData/putImageData，应避免动画中频繁调用。
Canvas API 本身不提供“图像处理算法”，它只负责像素读写和基础绘图；所谓“图像处理”，本质是手动操作 ImageData 的 data 数组 —— 这一步绕不开，也最容易出错。
为什么 drawImage 后 getImageData 总是报错？跨域问题怎么破？
常见错误信息：Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
根本原因：浏览器禁止从跨域图片读取像素，哪怕图片已显示在页面上。不是 Canvas 不行，是安全策略卡死。
- 前端加载本地文件（
file://协议）时，所有图片都算“跨域”，必须起本地服务（如python3 -m http.server） - 线上图片需服务端配
Access-Control-Allow-Origin: *，且 JS 加载时显式开启 CORS：const img = new Image(); img.crossOrigin = 'anonymous'; img.src = 'https://example.com/photo.jpg';
- 用
canvas.toDataURL()或canvas.toBlob()导出时不受跨域限制，但导出内容不含原始像素（已渲染合成）
如何正确获取并修改单个像素的 RGBA 值？
ImageData.data 是一维 Uint8ClampedArray，每 4 个连续元素对应一个像素的 R、G、B、A（0–255）。索引公式固定：index = (y * width + x) * 4。
立即学习“Java免费学习笔记（深入）”；
常见误操作：直接改 data[x][y]（语法错）、用浮点数当索引（静默失败）、忘记 A 通道导致变透明。
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
<p>// 修改坐标 (10, 20) 的像素为纯红色（R=255, G=0, B=0, A=255）
const idx = (20 <em> canvas.width + 10) </em> 4;
data[idx] = 255; // R
data[idx + 1] = 0; // G
data[idx + 2] = 0; // B
data[idx + 3] = 255; // A</p><p>ctx.putImageData(imageData, 0, 0); // 必须调用才生效</p>合成多张图时，drawImage 和 globalCompositeOperation 谁该优先？
顺序决定结果：drawImage 是“绘制动作”，globalCompositeOperation 是“绘制时的混合规则”。后者只影响**接下来**的绘制，不影响已画内容。
典型场景：给图片加半透明遮罩、做蒙版擦除、实现图层叠加效果。
- 先设
ctx.globalCompositeOperation = 'source-over'（默认），再drawImage→ 正常覆盖 - 先设
ctx.globalCompositeOperation = 'destination-out'，再drawImage(mask)→ 用 mask 擦除底层图像 - 想叠加两张图并保留各自 Alpha，别用
'lighter'（已废弃），改用'source-atop'或手动 blend - 注意：部分模式（如
'xor'）在高清屏或缩放 canvas 下表现异常，优先用ImageData手动计算
性能瓶颈在哪？哪些操作必须离屏处理？
高频操作中，getImageData / putImageData 是最大性能杀手——每次调用都触发 GPU-CPU 数据拷贝。1080p 图片单次拷贝就超 8MB。
真正实用的优化路径很窄：
- 避免在动画循环（
requestAnimationFrame）里反复调用getImageData；预取一次，复用data数组 - 批量像素处理用
for循环，别用forEach（创建闭包开销大） - 复杂滤镜（如高斯模糊）必须用
OffscreenCanvas（仅 Chrome/Firefox 支持）或 Web Worker 搬到后台线程，否则主线程卡死 - 简单合成（贴图、旋转、缩放）坚持用
drawImage，它走 GPU 加速；只有涉及逐像素逻辑时才碰ImageData
实际项目里，90% 的“图像处理需求”其实只需要 drawImage + globalAlpha + 少量 globalCompositeOperation 就能解决。真要写卷积核、FFT 或 YUV 转换，得接受 ImageData 的笨重和性能代价——没有银弹，只有取舍。
