实现局部高清截图需基于原始分辨率画布进行像素级重采样裁剪：先创建隐藏的原图尺寸处理画布，将图片完整绘制其中；再根据显示画布缩放比换算用户选区坐标；最后用九参数drawImage从处理画布精确裁剪并导出。
要实现指定坐标范围的局部高清截图，关键不是“截图”而是“像素级重采样裁剪”——必须绕过展示画布的缩放失真，直接在原始分辨率画布上操作。
准备原始尺寸画布与坐标映射
加载图片后，立刻创建一个隐藏的、按原图真实宽高的 canvas（不缩放），把图片完整绘制进去。这个画布就是你的“处理画布”，所有裁剪运算都基于它。
- 用
image.naturalWidth和image.naturalHeight获取真实尺寸 - 设置处理画布：
canvas.width = image.naturalWidth; canvas.height = image.naturalHeight - 显示画布仅用于交互预览，其宽高可设为适合屏幕的尺寸（如 800×600），但需记录缩放比：
scaleX = naturalWidth / displayWidth，scaleY = naturalHeight / displayHeight - 用户在展示画布上拖选的
(x, y, width, height)，要换算成处理画布坐标：sx = x * scaleX，sy = y * scaleY，sw = width * scaleX，sh = height * scaleY
用 drawImage 精确裁剪到新画布
新建一个目标 canvas，宽高设为裁剪区域的真实像素尺寸（即 sw 和 sh），然后调用九参数 drawImage 直接从处理画布提取：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
ctx.drawImage(sourceCanvas, sx, sy, sw, sh, 0, 0, sw, sh)- 注意：源是 处理画布（非 img 对象，也非展示画布），确保像素无损
- 避免使用
getImageData+putImageData，它内存开销大且易触发跨域限制；drawImage更高效、兼容性更好
导出高清结果（支持 JPEG/PNG/WebP）
裁剪完成后，优先用 toBlob 导出，兼顾质量与内存控制：
立即学习“前端免费学习笔记（深入）”；
- 导出 JPEG 并保持高保真：
croppedCanvas.toBlob(blob => { /* 上传或下载 */ }, 'image/jpeg', 0.95) - 需要透明通道就用 PNG：
'image/png'（无需质量参数） - 现代浏览器支持 WebP：
'image/webp'，体积更小画质不输 JPEG - 如需 Data URL（例如快速预览），用
toDataURL('image/jpeg', 0.95)，但注意 Base64 体积膨胀约 33%
防坑要点
几个容易忽略却直接影响清晰度的问题：
- 图片必须已完全加载（监听
img.onload），且未被 CSS 缩放干扰（建议给<img>加display: none或移出 DOM） - 裁剪框最小尺寸建议不低于 20px（展示层），对应到原图至少 40–60 像素，防止模糊或空区域
- 若用户缩放了浏览器页面（如 Ctrl+/-），
e.offsetX/Y会不准，应改用e.clientX - canvas.getBoundingClientRect().left - 移动端需监听
touchstart/move/end，并统一用touches[0]坐标，避免和鼠标事件冲突
