工具先生

使用方法

图片裁剪与缩放的使用方法

结合图片裁剪与尺寸调整的工具,可先调整裁剪区域,再按用途修改输出尺寸并立即保存。博客配图、演示素材和上传前的尺寸调整,都可以在一个页面中完成。

图片裁剪与缩放 缩略图图片裁剪与缩放 缩略图
步骤
2 步
指南
附截图说明
内容
注意事项与 FAQ

适用场景

适合在这些时候使用

  • 裁出更醒目的博客配图
  • 调整演示资料中的图片尺寸
  • 上传前只保留必要区域
  • 将图片精确裁剪为指定的宽高比
  • 统一缩略图尺寸以保持版面一致
  • 按照上传限制调整图片大小

可实现内容

这个工具可以做什么

  • 拖拽选择裁剪区域
  • 以数值方式调整输出尺寸
  • 预览并保存结果
  • 固定宽高比进行裁剪
  • 保留原图并将编辑结果另存为独立文件
  • 以数值方式精确指定输出尺寸

步骤

步骤

这里按顺序整理操作流程与确认点,便于边看页面边继续操作。

步骤 1

选择图片并设置裁剪区域

选择图片文件后,决定裁剪区域的设定方式。既可以拖拽选择,也可以输入精确数值。

显示图片裁剪与缩放中图片选择与裁剪区域控制的编辑界面裁剪截图显示图片裁剪与缩放中图片选择与裁剪区域控制的编辑界面移动端裁剪截图

确认点

  • 图片已载入并显示在左侧编辑区域
  • 出现裁剪框

本画面的操作

01
选择图片

选择图片文件,或通过拖放方式载入。

显示图片裁剪与缩放中图片文件选择区域的裁剪截图显示图片裁剪与缩放中图片文件选择区域的移动端裁剪截图
02
裁剪区域

可在拖拽选择与数值输入之间切换,指定想保留的区域。

显示图片裁剪与缩放中裁剪区域控制的裁剪截图显示图片裁剪与缩放中裁剪区域控制的移动端裁剪截图
03
输出尺寸

设置保存后的宽高,并在需要时切换是否锁定纵横比。

显示图片裁剪与缩放中输出尺寸输入框的裁剪截图显示图片裁剪与缩放中输出尺寸输入框的移动端裁剪截图

步骤 2

选择输出格式并确认结果

选择输出格式,必要时调整质量后,点击“更新裁剪与缩放”。确认结果后下载即可。

显示图片裁剪与缩放中保存前确认结果位置的处理后预览裁剪截图显示图片裁剪与缩放中保存前确认结果位置的处理后预览移动端裁剪截图

确认点

  • 右侧会显示处理后的预览
  • 下载按钮变为可用状态

本画面的操作

01
输出格式与质量

可在 PNG、JPEG、WebP、AVIF 之间切换,并在需要时调整质量。

显示图片裁剪与缩放中输出格式与质量设置的裁剪截图显示图片裁剪与缩放中输出格式与质量设置的移动端裁剪截图
02
更新结果

裁剪区域与输出尺寸准备好后,更新结果以生成预览。

显示图片裁剪与缩放中更新按钮的裁剪截图显示图片裁剪与缩放中更新按钮的移动端裁剪截图
03
下载

如果处理后的预览符合预期,可立即保存。

显示图片裁剪与缩放中下载按钮的裁剪截图显示图片裁剪与缩放中下载按钮的移动端裁剪截图

注意事项

注意事项

将使用前应先判断的重要点按原因归纳整理。

确认事项

分别考虑裁剪区域与输出尺寸

裁剪区域决定保留哪些内容,输出尺寸决定保存后的大小。将两者分开考虑,更容易得到符合用途的图片。

确认事项

使用 JPEG 或 WebP 时注意画质

JPEG 和 WebP 的文件大小与外观都会随质量设置变化。对于文字较多或文档类图片,保存前先确认预览更稳妥。

注意

原图不会改动——编辑结果另存为独立文件

原图保持不变。裁剪或缩放的结果以独立文件保存,如需重来,可随时从原图重新操作。

FAQ

关于 图片裁剪与缩放 的常见问题

这里先整理能帮助使用前判断的常见问题。

可以在手机上使用吗?

可以。手机上也能使用,但精细定位和数值输入通常在更大的屏幕上更方便。

原图会被改动吗?

不会。原图会保留不变,编辑结果会以新文件形式保存。

裁剪时可以固定宽高比吗?

可以。固定比例后可调整裁剪范围,同时保持原有比例。

可以同时处理多张图片吗?

本页每次只处理一个文件,不支持批量处理。

输出尺寸有上限吗?

处理范围受限于浏览器可处理的大小。输出尺寸过大可能导致处理变慢。

调整大小时如何避免图片变形?

调整大小前固定宽高比,可在保持原有比例的同时进行缩放。

下一步指南

相关指南

这里整理了相关指南,便于继续操作时不迷失。