可以使用HTML5 File API在浏览器中实现图片裁剪与本地预览。先通过FileReader将选中图片读取为Data URL，再用Canvas绘制并按指定区域裁剪，最后通过toDataURL或toBlob导出结果，支持实时预览和下载。
可以直接用 HTML5 File API 实现图片裁剪和本地预览，无需上传服务器，整个流程在浏览器中完成。
选择图片并读取为 Data URL
用户通过 <input type="file"> 选择图片后，用 FileReader 将其读取为 base64 数据 URL，供后续渲染使用。
- 监听
change事件获取File对象 - 创建
FileReader实例，调用readAsDataURL() - 在
onload回调中拿到result（即 data URL），赋值给<img>的src
用 Canvas 实现简单矩形裁剪
将原始图片绘制到隐藏的 <canvas> 上，再根据用户选定区域（如拖拽或输入坐标）提取对应像素，生成新图像。
- 设置 canvas 宽高与原始图一致，用
drawImage()绘制整图 - 定义裁剪区域：
{x, y, width, height}（单位为像素） - 调用
ctx.drawImage(img, sx, sy, sw, dx, dy, dw, dh)提取子区域并重绘到新 canvas - 用
toDataURL('image/png')或toBlob()导出裁剪结果
实时预览与下载控制
裁剪后的图片可直接显示在页面上，并支持一键保存到本地。
立即学习“前端免费学习笔记（深入）”；
- 把裁剪所得 data URL 赋给预览
<img>的src属性，实现即时预览 - 创建临时
<a>链接，设置href为 data URL，download属性指定文件名 - 触发
a.click()模拟点击，启动浏览器下载 - 注意：Safari 对 data URL 下载支持有限，可改用
Blob+URL.createObjectURL()
基础交互建议
提升体验的关键在于轻量、直观、容错。
- 限制文件类型：
accept="image/*"，并检查file.type.startsWith('image/') - 添加加载状态提示，避免用户重复操作
- 对过大图片做等比缩放处理，防止 canvas 渲染失败或内存溢出
- 裁剪框可结合
mousemove+mousedown实现拖拽选区，或提供宽高输入框手动设置
不复杂但容易忽略细节，比如跨域图片无法读取 canvas 像素、移动端 touch 事件需额外适配、部分旧浏览器不支持 toBlob 等。核心逻辑清晰，落地时注意兼容性和用户反馈即可。
