图片裁剪框选核心是监听鼠标/触摸事件动态绘制可拖拽缩放矩形框，并通过坐标转换映射至原始图片像素位置，需处理缩放偏移、容器居中及移动端兼容。
图片裁剪区域的框选操作，核心是监听鼠标（或触摸）事件，在画布或定位层上动态绘制一个可拖拽、缩放的矩形框，并实时计算其相对于原始图片的坐标和尺寸。不依赖第三方库也能实现，关键在于事件控制和坐标转换。
监听鼠标按下、移动和释放事件
框选的基础是捕获用户意图：按下（start）→ 移动（drag）→ 释放（end）。需在图片容器上绑定三个事件，并记录起始点坐标：
- mousedown：保存鼠标初始位置（clientX/clientY），标记“开始框选”状态
- mousemove：若处于框选中，根据当前鼠标位置与起点，计算矩形左、上、宽、高；更新裁剪框 DOM 元素的 left/top/width/height 样式
- mouseup：结束框选，保存最终裁剪区域（如
{x, y, width, height}），可用于后续裁剪或预览
处理图片缩放与定位带来的坐标偏移
真实场景中，图片常被 contain 或 cover 缩放，且可能居中显示。直接用鼠标坐标会错位。必须将鼠标位置映射回原始图片坐标系：
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
- 获取图片实际渲染尺寸（
img.naturalWidth / naturalHeight与img.offsetWidth / offsetHeight的比例） - 计算容器内图片的偏移量（如
(containerWidth - imgWidth) / 2水平居中时的 left 偏移） - 鼠标坐标减去容器内图片左上角偏移，再除以缩放比，得到原始图上的像素位置
例如：图片原始 1200×800，容器显示为 600×400（缩放比 0.5），居中，则鼠标 x=320 实际对应原始图 x = (320 − 150) / 0.5 = 340。
绘制裁剪框并支持交互优化
裁剪框建议用绝对定位的 <div> 叠加在图片上方（避免干扰原图），样式设 <strong>border: 2px dashed #007bff</strong> + <strong>pointer-events: none</strong>（防止遮挡鼠标事件）。如需拖拽调整，可在框四角/边添加手柄元素，监听其 mousedown 并进入“调整模式”，按方向限制 resize 行为（如只允许等比缩放、最小宽高限制等）。<h3>兼容移动端触摸操作</h3>
<p>将 <code>mousedown/mousemove/mouseup 替换为 touchstart/touchmove/touchend，注意 touches[0] 取第一个触点，并阻止默认行为（e.preventDefault()）避免页面滚动干扰。触摸事件坐标用 e.touches[0].clientX 获取，逻辑与鼠标一致。
