Image Cropper 图片裁剪工具
Image Cropper 允许你在浏览器中精确裁剪图片，支持像素级控制裁剪区域，无需上传任何数据，保护隐私。
如何使用 Image Cropper
- 点击上传或拖拽图片到工具界面，支持常见格式如 JPEG 和 PNG。
- 通过输入框或滑块设置裁剪区域的起点坐标（X，Y）和尺寸（宽度，高度），数值会自动限制在图片边界内，保证有效裁剪。
- 预览裁剪结果，确认无误后点击“裁剪”按钮，工具将在浏览器内通过 OffscreenCanvas 生成输出图像。
- 下载裁剪后的图片，格式保持与原图一致，JPEG格式默认压缩质量为92%。
工作原理
Image Cropper 利用 HTML5 的 OffscreenCanvas 技术实现客户端裁剪。核心方法是 ctx.drawImage(bitmap, sx, sy, sw, sh, 0, 0, sw, sh)，其中 sx 和 sy 表示裁剪区域的起点，sw 和 sh 是裁剪区域宽度和高度。工具自动约束这些参数确保不超出原图边界，避免出现空白或错误裁剪。裁剪后的 Canvas 尺寸正好匹配裁剪区域大小，输出图像尺寸精准。
所有图像处理均发生在用户浏览器端，不会将图片上传到服务器，确保用户数据安全和隐私保护。
示例输入与输出
输入: 原图尺寸 1200x800 像素，裁剪参数 X=100, Y=50, Width=400, Height=300
输出: 裁剪后的图片尺寸 400x300 像素，格式与原图相同（JPEG/PNG），JPEG质量92%适用场景
- 网页开发者需要裁剪素材图片以适配响应式设计。
- UI设计师快速裁剪图片用于界面原型展示。
- SEO 专家优化网站图片尺寸，减少加载时间。
- 学生或内容创作者需要简单高效的图片裁剪。
结合 resize-image 调整大小和 rotate-image 旋转图片工具，可以满足更复杂的图像处理需求。
常见问题
Image Cropper 支持哪些图片格式？
Image Cropper 支持常见的 JPEG 和 PNG 格式。输出格式保持与原始图片一致，JPEG 输出时使用 92% 的压缩质量，确保图像质量和文件大小的平衡。
裁剪区域如何保证不超出图片边界？
工具通过限制裁剪参数满足条件 0 ≤ sx ≤ width 和 0 ≤ sy ≤ height，以及 1 ≤ sw ≤ width - sx 和 1 ≤ sh ≤ height - sy，确保裁剪区域严格在图片边界内，避免裁剪失败或空白区域。
裁剪过程是否会上传图片到服务器？
不会。所有裁剪操作均在浏览器端通过 OffscreenCanvas 执行，图片数据不经过网络传输，保障用户隐私和数据安全。
裁剪结果如何影响图片质量？
裁剪本身不改变图片内容质量，JPEG 格式输出默认采用 92% 的压缩质量，兼顾文件大小和视觉效果。PNG 格式保持无损输出，适合需要透明背景的图片。
可以通过 Image Cropper 结合其他工具进行图片编辑吗？
可以。你可以先使用 crop-image 裁剪图片，然后使用 resize-image 调整大小，或 rotate-image 旋转，满足复杂的编辑需求。