Image Crop - Based HTML5 Canvas Online Image Process

🖼️

点击或拖拽图片到此处

支持 PNG / JPG / GIF / WebP，文件不会上传到服务器

🔒 纯前端处理：图片仅在浏览器本地处理，不会上传到任何服务器，保护你的隐私安全。

Item

Formula

Source / Standard

Crop region

x, y, width and height

crop rectangle

Aspect ratio

Width/height

aspect ratio

Output size

Crop width × crop height

output dimension

📚 深度解析：图片裁剪（自由/比例锁定）

💡 常见使用场景

社交封面要求固定比例，手动拖容易歪。
去掉照片多余边框或路人，只留主体。

锁 16:9 裁封面

原图 4000×3000，锁 16:9 框，输出 4000×2250，导出 JPEG 质量 92，约 520KB。

1:1 裁头像

锁 1:1，从 3000×2000 中取中间 2000×2000 正方形，PNG 导出约 1.1MB。

❓ 常见问题（FAQ）

比例锁定后输出尺寸怎么定？: 以较短边为基准按比出另一边。如锁 16:9 且高 2250，则宽 = 2250×16/9 = 4000。
导出 JPEG 为何要设质量？: 裁剪后重新编码，质量 92 兼顾清晰与体积；纯透明需求仍用 PNG。

📖关于「图片裁剪」 ▼

📝工具简介

图片裁剪工具是一款基于 HTML5 Canvas 的在线图片处理工具。无需安装软件、无需注册登录，打开网页即可使用。支持自由拖拽创建裁剪框、四角四边调整大小、多种宽高比预设、90° 旋转以及实时预览，全部在浏览器本地完成，图片不离开设备。

✨功能特点

拖拽创建裁剪框，所见即所得
四角 + 四边八向调整大小
7 种宽高比预设（1:1、4:3、16:9 等）
90° 左右旋转，裁剪前自由调整方向
实时显示裁剪坐标与尺寸
实时预览裁剪结果
支持 PNG / JPEG 输出与质量控制
纯前端处理，图片不上传，保护隐私
支持深色模式与移动端响应式布局

🎯使用场景

裁剪头像、证件照尺寸调整
社交媒体封面图（16:9 / 1:1）
手机壁纸裁剪（9:16 竖屏）
电商主图、详情图比例裁剪
去除图片多余边距与水印区域
批量前处理素材，快速构图

Image Crop - Based HTML5 Canvas Online Image Process

宽高比预设

输出设置

裁剪结果预览

Formula & Standard References

📚 深度解析：图片裁剪（自由/比例锁定）

💡 常见使用场景

❓ 常见问题（FAQ）

📝工具简介

✨功能特点

🎯使用场景

图片裁剪工具

Image Crop - Based HTML5 Canvas Online Image Process

宽高比预设

输出设置

裁剪结果预览

Formula & Standard References

📚 深度解析：图片裁剪（自由/比例锁定）

💡 常见使用场景

❓ 常见问题（FAQ）

🔗 相关工具

📝工具简介

✨功能特点

🎯使用场景