拖动裁剪框边缘调整大小需手动实现：先通过坐标计算识别鼠标靠近的边或角热区，再按方向约束缩放，同时换算显示坐标到原始像素，并提供光标变化、手柄高亮和尺寸提示等交互反馈。
拖动裁剪框边缘调整大小，核心是识别鼠标靠近哪条边/角，再按方向约束缩放行为。这不是 Canvas 自带功能，得靠 JavaScript 手动计算坐标、监听事件、重绘选区。
判断鼠标落在裁剪框哪个可调节区域
裁剪框本质是一个矩形，有4条边（左、右、上、下）和4个角（左上、右上、左下、右下）。用户拖动时，需先检测鼠标是否进入某个“热区”——比如在右边缘 10 像素范围内，就视为可水平拉宽。
- 获取鼠标相对于 canvas 的坐标（用 getBoundingClientRect() 校准，避免缩放或滚动偏移）
- 设裁剪框当前为
{x, y, width, height}，定义各热区边界，例如：
→ 右边热区：mouseX > x + width - 5 && mouseX y && mouseY <br> → 左上角热区：<code>Math.hypot(mouseX - x, mouseY - y) （用距离判断更自然） - 记录当前激活的调节方向，如
resizeHandle = 'right'或'top-left'
鼠标拖动时动态更新裁剪框尺寸
按下并移动鼠标后，不再简单平移整个框，而是根据激活方向重新计算 x、y、width、height，同时保证最小尺寸（如 ≥20px）和不越界（不能拉出图像范围）。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 若
resizeHandle === 'right'：只改width = Math.max(20, mouseX - x) - 若
resizeHandle === 'bottom-right'：同步改width和height，保持原点(x, y)不变 - 若
resizeHandle === 'left'：改x = Math.min(mouseX, x + width - 20)，再改width = x + width - mouseX - 所有更新后，调用重绘函数，清空 canvas 再绘制原图 + 新裁剪框（带半透明遮罩和边框）
确保缩放/居中显示不影响坐标映射
用户看到的 canvas 上图片常被缩放或居中显示，但裁剪必须基于原始像素坐标。所以拖动计算出的 x/y/width/height 是 canvas 上的显示值，需按比例换算回原图坐标，才能用于 drawImage() 裁剪。
- 保存原始图片尺寸：
img.naturalWidth、img.naturalHeight - 计算缩放比：
scaleX = img.naturalWidth / canvas.width（若图片被拉伸填满，需单独记录实际缩放逻辑） - 最终裁剪参数：
sx = x * scaleX、sy = y * scaleY、sWidth = width * scaleX等
视觉反馈与交互细节
好的体验离不开即时反馈：光标变化、热区高亮、实时尺寸提示。
- 不同调节方向对应不同 cursor：
ew-resize（左右）、ns-resize（上下）、nwse-resize（对角） - 在裁剪框边缘画小方块或圆点作为手柄，增强可点击感
- 拖动时显示当前宽高数值（如右上角浮动标签），单位为像素
- 松开鼠标后，自动微调使裁剪框贴合图像边界（防负值或超限）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
