canvas截图与缩放的核心是坐标管理与痕迹保留：缩放需围绕鼠标中心三步平移-缩放-反向平移并save/restore；截图区域须逆变换映射回原始图像空间；采用双层canvas实现全屏适配；导出用todataurl或toblob，跨域图片需设crossorigin。
Canvas 实现截图与缩放，核心不在“画什么”，而在“怎么管坐标”和“怎么留痕迹”。全屏交互界面成败的关键，是缩放时鼠标位置能精准锚定、截图区域能准确映射到原始图像空间——这两点一旦错位，用户操作就会失灵。
缩放必须围绕鼠标中心，不能只调 scale()
直接用 ctx.scale() 会把整个坐标系按左上角缩放，导致图形“漂移”。正确做法是：先平移画布，让鼠标点成为新原点；再缩放；最后反向平移回来。三步缺一不可：
- 记录鼠标在 canvas 内的相对坐标（
e.offsetX/e.offsetY） - 调用
ctx.translate(-offsetX, -offsetY)把该点移到 (0,0) - 执行
ctx.scale(ratio, ratio) - 再调用
ctx.translate(offsetX, offsetY)拉回视觉中心
这个过程必须包裹在 save() 和 restore() 之间，避免污染后续绘制。
截图区域要映射回原始像素坐标
用户拖出一个截图框（比如 {x:120, y:80, width:300, height:200}），这组值是当前缩放+平移后的屏幕坐标。要真正截取原始图像对应区域，需做逆变换：
- 先减去当前画布偏移量（
imgX,imgY） - 再除以当前缩放比（
imgScale） - 得到原始图像上的裁剪起点和尺寸：
srcX = (x - imgX) / imgScale，srcW = width / imgScale等
然后用 drawImage(img, srcX, srcY, srcW, srcH, dstX, dstY, dstW, dstH) 精确绘制裁剪结果到新 canvas。
全屏适配靠双层 canvas 分工
不要强行拉伸单个 canvas 去填满屏幕——失真且响应迟钝。推荐双 canvas 结构：
- 底层 canvas：固定逻辑分辨率（如 1920×1080），承载所有图形、缩放和平移逻辑，坐标全部基于此空间计算
-
顶层 canvas：CSS 全屏覆盖，
style="width:100vw; height:100vh;"，仅作显示容器；通过transform: scale(...)或动态重设width/height属性来匹配视口
这样既保持绘图精度，又实现视觉全屏，还能兼容高 DPI 屏幕（只需调整底层 canvas 的像素密度）。
截图导出不依赖第三方库
原生 Canvas 就支持高质量导出：
- 用
toDataURL('image/png')获取 base64 字符串，可直接赋给<a href="..." download></a> - 需要更高清或带透明通道时，改用
toBlob(callback, 'image/png', 1.0) - 若截图内容含跨域图片，务必在
img.crossOrigin = 'anonymous'，否则toDataURL会报错
整个流程无需 html2canvas 或服务端中转，纯前端闭环，响应快、隐私可控。
