核心是用URL.createObjectURL()转文件为图片URL并绑定到img，裁剪框用绝对定位div叠加，通过mousedown/mousemove实现拖拽，滚轮缩放配合transform:scale()和origin同步更新，限制0.5～3.0倍。
用 <input type="file"> 选图后，怎么立刻在页面里显示可拖拽缩放的裁剪框
核心是把文件转成 URL.createObjectURL()，再绑定到 <img> 的 src。别直接读取 FileReader.readAsDataURL——它会多一次 base64 编码，大图卡顿明显。
裁剪框本身用绝对定位的 <div> 叠在 <img> 上，监听 mousedown/mousemove 实现拖拽；缩放靠 transform: scale() + 鼠标滚轮事件，注意要同步更新裁剪框宽高和 transform-origin，否则缩放中心偏移。
- 裁剪框初始尺寸建议设为图片宽高的 70%，避免一上来就满屏
- 拖拽时用
event.preventDefault()防止图片被浏览器默认拖走 - 缩放限制建议设为 0.5～3.0 倍，超出后
wheel事件直接return
Cropper.js 和手写裁剪逻辑，什么情况下该选哪个
Cropper.js 适合快速上线、支持旋转/镜像/多比例锁定的场景，但体积约 120KB（gzip 后 40KB），且默认样式侵入性强，覆盖 .cropper-* 类要加 !important。
手写适合轻量需求：只要矩形裁剪、不需旋转、输出固定尺寸（如 200×200）。关键点是计算「图片实际渲染尺寸」与「原始尺寸」的缩放比，否则 getBoundingClientRect() 拿到的坐标直接用于裁剪会错位。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用
img.naturalWidth / img.offsetWidth算 X 轴缩放比，Y 轴同理 -
Cropper.js的getCroppedCanvas()输出的是<canvas>，要转 blob 得调toBlob()，别漏掉回调 - 手写方案里，裁剪坐标最终要映射回原始图尺寸：
realX = cropLeft * scaleX
点击“确认裁剪”后，怎么生成真正可用的头像图片（不是 canvas 预览）
必须走 canvas 绘制 + toBlob，不能只截取 DOM 中的裁剪框位置——那只是视觉层叠，没动像素数据。
步骤：创建 <canvas> → 设置宽高为目标尺寸（如 200×200）→ 用 ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) 把原图指定区域画进去 → 调 canvas.toBlob()。注意 sx/sy/sw/sh 是原始图上的像素坐标，不是页面坐标。
- 如果目标尺寸是圆形头像，
ctx.arc()剪辑路径后再drawImage，否则边缘有锯齿 -
toBlob()第二个参数指定"image/webp"可减小 25% 体积，但 iOS Safari 14 以下不支持 - 生成 blob URL 后，赋给新
<a href="..." download="avatar.jpg">即可触发下载
移动端 touch 事件处理，为什么拖拽经常失效或跳变
根本原因是 touch 事件默认行为（如双指缩放、滚动）干扰了手势识别。必须在 touchstart 里 event.preventDefault()，但只对裁剪容器内生效，否则整个页面不能滚动了。
另外，touchmove 的 clientX/clientY 在部分安卓机型上会抖动，建议加简单滤波：记录上一次有效坐标，位移小于 2px 就忽略本次事件。
- 不要混用
pointerdown和touchstart，iOS Safari 对 pointer 事件支持不稳定 - 缩放用
touchstart记录两指距离，touchmove中实时计算新距离比值，别依赖scale属性 - 裁剪框边界检测必须在 touchmove 里做，否则手指划出容器后还在拖，松手时位置错乱
裁剪工具最难的从来不是画框，而是把用户看到的“这个位置”准确还原成原图里的“那个像素”。所有坐标换算漏掉一个缩放比，导出图就偏移；所有事件没阻止默认行为，移动端就失灵。细节就在这些映射关系里。
