什么是图片裁剪工具？
图片裁剪工具是一款在线图片裁剪工具，可以精确选择图片中的区域进行裁剪，支持三种方式确定裁剪范围，三种方式实时联动，所有处理在浏览器本地完成，图片不会上传服务器。
三种确定裁剪区域的方式：
- 拖动裁剪框：在预览图中直接拖动蓝色裁剪框的边和角，快速调整裁剪范围；也可以拖动框内部移动整个裁剪区域。拖动角点时按住 Ctrl（Mac 按 ⌘）可保持宽高比不变
- 输入像素坐标：精确输入左边、上边、右边、下边的像素坐标，适合需要精确到像素的场景
- 输入百分比：输入四条边在总宽度（或总高度）中的百分比，适合按比例裁剪的场景
核心功能：
- 实时联动：拖动框、坐标输入、百分比输入三种方式互相联动，任一方式修改都会同步更新其他方式
- 三分线辅助：裁剪框内显示三分构图线，帮助构图裁剪
- 精确控制：像素坐标精确到整数，百分比精确到小数点后两位
- 原图分辨率：裁剪基于原图实际像素进行，不受预览缩放影响
- 一键下载：裁剪后直接下载 PNG 格式图片
典型使用场景：
- 头像制作：从照片中裁剪正方形区域作为头像
- 证件照裁剪：精确按像素坐标裁剪证件照到指定尺寸
- 截图局部放大：从截图中裁剪关键区域
- 社交媒体配图：按百分比裁剪适配不同平台比例要求
技术原理：使用 Canvas API 将原图绘制到预览画布，叠加半透明遮罩层标识裁剪框外区域，蓝色边框和角点手柄支持拖拽调整。裁剪时直接从原图对应区域提取像素数据，确保输出质量与原图一致。
What is the Image Cropper Tool?
The Image Cropper is an online image cropping tool that lets you precisely select a region of your image for cropping. It supports three methods to define the crop area, all synchronized in real-time. All processing runs locally in your browser — your images never leave your device.
Three ways to define the crop area:
- Drag the crop box: Directly drag the edges and corners of the blue crop box in the preview to quickly adjust the crop range; you can also drag inside the box to move the entire crop area. Hold Ctrl (⌘ on Mac) while dragging a corner to lock the aspect ratio
- Enter pixel coordinates: Precisely input left, top, right, bottom pixel coordinates for pixel-perfect cropping
- Enter percentages: Input the position of each edge as a percentage of total width or height, ideal for proportional cropping
Core features:
- Real-time sync: Drag box, coordinate input, and percentage input are all synchronized — any change in one method instantly updates the others
- Rule of thirds guides: Dotted thirds lines inside the crop box help with composition
- Precise control: Pixel coordinates to integer precision, percentages to two decimal places
- Original resolution: Cropping is based on actual image pixels, unaffected by preview scaling
- One-click download: Download the cropped image directly as PNG
Common use cases:
- Avatar creation: Crop a square region from a photo for a profile picture
- ID photo cropping: Precisely crop ID photos to specified dimensions by pixel coordinates
- Screenshot detail: Crop key areas from screenshots
- Social media images: Crop by percentage to fit different platform aspect ratio requirements
Technical approach: Uses the Canvas API to draw the original image on a preview canvas, overlaying a semi-transparent mask outside the crop region. Blue borders and corner handles support drag adjustment. Cropping extracts pixel data directly from the original image region, ensuring output quality matches the original.