canvas.toDataURL() 返回空白是因为图像未加载完成或跨域未配置；需确保img.onload后绘制且设置img.crossOrigin='anonymous'；toDataURL()返回base64，像素操作应改用getImageData/putImageData。
canvas.toDataURL() 为什么复制出来是空白？
常见错误是调用 toDataURL() 时，canvas 还没真正绘制完图像，或者图像来自跨域资源但没设置 crossOrigin。浏览器会静默拒绝读取未就绪或被 CORS 阻止的像素数据，结果返回透明黑图或空字符串。
- 确保图像加载完成后再绘图：
img.onload = () => { ctx.drawImage(img, 0, 0); } - 跨域图片必须提前声明：
img.crossOrigin = 'anonymous';（且服务端需允许Access-Control-Allow-Origin） -
toDataURL()返回的是 base64 字符串，不是二进制数据；若要后续操作像素，改用ctx.getImageData()
用 getImageData + putImageData 深拷贝 canvas 像素
这是真正“克隆图像内容”的方式，绕过渲染流程，直接复制像素缓冲区。适用于需要逐像素处理、滤镜叠加或离屏计算的场景。
- 必须在同一 canvas 上下文内操作，否则
putImageData()会报SecurityError - 注意尺寸匹配：传入的
ImageData宽高必须和目标区域一致，否则裁剪或拉伸 - 性能敏感：大图反复调用
getImageData()会产生明显卡顿，建议缓存或节流 - 示例：
const data = ctx1.getImageData(0, 0, width, height);<br>ctx2.putImageData(data, 0, 0);
cloneNode(true) 能不能复制 canvas 内容？
不能。它只复制 DOM 结构和属性（如 width/height），不复制已绘制的像素。克隆后的 canvas 是干净的白板，ctx.getImageData() 会返回全透明数据。
- 唯一例外：如果原 canvas 是用
drawImage()绘制了另一个 canvas，且那个源 canvas 本身可读，那 clone 后再重绘一次也能间接还原 —— 但这不是克隆，是重绘 - 想保留样式（如
transform、globalAlpha），得手动同步 canvas 的style和上下文状态
离屏 canvas 克隆比 DOM 克隆更可靠
把绘制逻辑封装到 OffscreenCanvas（Worker 中）或内存 canvas（document.createElement('canvas')），再用 drawImage() 复制到可视 canvas，是最可控的“图像克隆”路径。
立即学习“前端免费学习笔记（深入）”；
-
OffscreenCanvas在主线程外运行，适合大量图像处理，但兼容性限于 Chrome/Firefox/Edge 93+ - 内存 canvas 不占页面布局，避免重排，适合做临时缓冲或预处理
- 关键点：所有绘制必须在同一个 origin 下，否则
drawImage()也会触发 CORS 污染 - 示例：
const memCanvas = document.createElement('canvas');<br>memCanvas.width = canvas.width;<br>memCanvas.height = canvas.height;<br>memCanvas.getContext('2d').drawImage(canvas, 0, 0);
最常被忽略的是跨域和绘制时机这两个条件，哪怕代码一字不差，漏掉 img.crossOrigin 或在 onload 外调用 drawImage()，结果就是“看起来复制了，实际是空的”。
