移动端canvas图像裁剪必须用touch事件重写交互逻辑，核心是手势响应准确、坐标映射正确、视觉反馈及时；需监听touchstart/touchmove/touchend并preventdefault阻止滚动；坐标须基于getboundingclientrect精确映射，并按缩放比和偏移量换算至原始图像坐标；进阶支持双指缩放与旋转，裁剪框坐标需矩阵变换反推。
Canvas 图像裁剪在移动端必须用 touch 事件重写交互逻辑，不能直接复用 PC 的 mouse 事件。核心在于手势响应准确、坐标映射正确、视觉反馈及时，同时避免页面滚动干扰。
必须监听 touchstart/touchmove/touchend
移动端手指滑动会默认触发页面滚动，若继续用 mousedown/mousemove，裁剪框会完全失灵。所有交互事件需替换为：
-
touchstart：记录初始触摸点（
event.touches[0]），保存起始坐标和图片当前偏移量 -
touchmove：实时计算位移，更新图片位置；每次调用
event.preventDefault()阻止默认滚动 - touchend：清理临时状态，如清除 active 标志或过渡动画
坐标要基于 getBoundingClientRect 精确映射
直接用 event.touches[0].clientX 会受页面滚动、缩放、容器 margin/border 影响。可靠做法是：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 先获取 canvas 在视口中的真实位置：
const rect = canvas.getBoundingClientRect() - 将触摸点转为 canvas 像素坐标：
const x = touch.clientX - rect.left; const y = touch.clientY - rect.top - 后续所有拖拽距离、裁剪框边界、缩放中心点，都基于这个 x/y 计算
缩放比换算不可省略
图片通常等比缩放后居中显示在 canvas 内，此时用户看到的坐标 ≠ 原图像素坐标。导出前必须还原：
- 提前计算缩放比：
const scale = Math.min(containerW / img.naturalWidth, containerH / img.naturalHeight) - 触摸点坐标除以 scale，再减去图片在 canvas 中的水平/垂直偏移量（如
(canvas.width - img.naturalWidth * scale) / 2） - 最终得到原始图片上的 sx/sy/sw/sh，才能传给
ctx.drawImage(img, sx, sy, sw, sh, 0, 0, dw, dh)
裁剪区域要支持双指缩放与旋转（进阶）
仅拖拽不够，专业裁剪需手势增强：
- 监听
PinchGesture（鸿蒙）或touchstart时判断 touches.length === 2，计算两指间距变化实现缩放 - 通过两指角度差实现旋转修正，配合 CSS transform 或 canvas save/rotate 实现视觉同步
- 缩放/旋转后，裁剪框四角坐标需用矩阵变换反推回原始图像坐标，否则导出内容错位
