✂️ 图片裁剪工具

什么是图片裁剪？

图片裁剪是指从原始图片中截取指定区域的操作，去掉不需要的部分，保留感兴趣的区域。裁剪是最常用的图片编辑操作之一，广泛应用于头像制作、截图修图、照片美化、网页配图等场景。本工具基于HTML5 Canvas API在浏览器本地实现，图片不需要上传服务器。

图片裁剪的常见应用场景

1. 头像/证件照制作

各种社交平台、证件申请、求职简历都需要特定尺寸的头像或证件照。使用图片裁剪工具，可以将一张大照片按照需要的比例（如1:1正方形头像、3:4证件照比例）精确裁剪出合适的部分。相比于直接缩放，裁剪能保证主体人物居中且构图合理。

2. 截图修图

截取网页或软件界面后，常常需要裁掉多余的边框、空白区域或敏感信息，只保留需要展示的内容。比如分享Bug截图时只保留错误区域，分享数据时只保留图表部分。裁剪可以让截图更聚焦、更专业，同时也能保护隐私。

3. 照片二次构图

拍照时由于时间仓促或条件限制，构图可能不够理想。通过后期裁剪，可以重新调整画面比例和主体位置，获得更好的视觉效果。比如将横拍的照片裁成竖版用于手机壁纸，或者按照三分法重新构图，让画面更有层次感。

4. 电商商品图制作

电商平台对商品主图有严格的尺寸和比例要求（如淘宝主图800×800正方形、亚马逊主图有特定比例要求）。使用裁剪工具可以将产品照片按照平台要求的尺寸精确裁剪，确保商品在搜索列表中展示效果最佳。

如何使用图片裁剪工具

1. 上传图片 — 点击拖拽区域或直接将图片拖入，支持JPG、PNG、WebP等常见格式。
2. 选择比例 — 点击上方按钮选择裁剪比例，自由裁剪无比例限制，也可选择1:1、4:3、16:9等常用比例。
3. 调整裁剪框 — 拖拽裁剪框移动位置，拖拽四角调整大小。也可直接输入精确的坐标和尺寸数值。
4. 裁剪下载 — 选择输出格式和质量，点击"裁剪并下载"保存裁剪后的图片。

为什么选择本工具？

• 纯前端处理：基于Canvas API实现，所有操作在浏览器本地完成，图片不上传服务器。
• 多种比例：支持自由裁剪和多种固定比例（1:1、4:3、16:9、3:4、9:16等）。
• 精确控制：可通过拖拽和输入数值两种方式精确调整裁剪区域。
• 多种格式：支持PNG、JPEG、WebP三种输出格式，质量可调。
• 完全免费：无使用次数限制，无需注册。

技术原理

图片裁剪的核心是Canvas API的getImageData()和drawImage()方法。当用户上传图片后，图片被绘制到Canvas上。用户操作裁剪框时，我们记录裁剪区域的坐标(x, y)和尺寸(width, height)。当点击裁剪时，创建一个新的Canvas，尺寸与裁剪区域相同，然后使用drawImage()方法的源区域参数，将原图片中指定区域的像素绘制到新Canvas上，最后通过toDataURL()或toBlob()导出为图片文件。

关键技术点：(1) 图片加载后需要根据容器大小进行缩放显示，但裁剪坐标需要换算回原始图片尺寸；(2) 裁剪框的拖拽和缩放需要处理边界限制，不能超出图片范围；(3) 固定比例裁剪时，调整尺寸需要保持宽高比不变；(4) 导出时使用原始图片尺寸，保证裁剪后的图片清晰度。

// 图片裁剪核心代码
function cropImage(sourceImg, cropX, cropY, cropW, cropH, format, quality) {
  const canvas = document.createElement('canvas');
  canvas.width = cropW;
  canvas.height = cropH;
  const ctx = canvas.getContext('2d');
  // 从源图片的 (cropX, cropY) 位置截取 cropW × cropH 大小的区域
  ctx.drawImage(sourceImg, cropX, cropY, cropW, cropH, 0, 0, cropW, cropH);
  const mimeType = 'image/' + format;
  return canvas.toDataURL(mimeType, quality);
}

裁剪技巧与最佳实践

• 三分法构图：将画面横向和纵向各分为三等分，主体放在交叉点上，视觉效果更自然。
• 留出呼吸空间：人物照片在视线方向多留一些空间，不要让主体紧贴边缘。
• 不要过度裁剪：裁剪掉的像素无法恢复，建议先复制原图再操作，或裁剪后另存为新文件。
• 注意分辨率：裁剪区域越小，输出图片的像素越少，如果需要打印或高清展示，要确保裁剪区域足够大。
• 格式选择：需要透明背景选PNG，照片选JPEG，网页优化选WebP。