图片裁剪工具
Canvas本地裁剪，支持自由/1:1/16:9/4:3/3:2比例
选择图片文件
上传图片后在画布上拖拽选择裁剪区域
点击选择或拖拽图片到此处
所有处理在浏览器本地完成
图片裁剪说明
本工具使用 HTML5 Canvas API 和鼠标交互在浏览器本地实现图片裁剪，支持在画布上拖拽选择裁剪区域。
原理：将图片绘制到 Canvas 上，通过监听 mousedown / mousemove / mouseup 事件跟踪鼠标轨迹，绘制半透明遮罩和选区边框，最后通过 ctx.drawImage 的裁剪参数提取选区内容。
自由裁剪：不限制选区宽高比，可任意拖拽选择矩形区域。
固定比例：选择 1:1、16:9、4:3、3:2 等比例后，拖拽选区时自动按比例约束宽高，适用于头像、封面、横幅等固定比例场景。
操作方式：在图片上按住鼠标左键拖拽即可绘制选区，松开鼠标完成选择。点击"重置选区"可清除当前选区重新选择。
遮罩效果：选区外的区域显示为半透明黑色遮罩，选区内保持原图亮度，清晰区分裁剪区域。
用途：头像裁剪、图片局部截取、去除多余边距、适配特定比例、社交媒体封面制作等。