首页 › 前端工具 › 图片缩放
IR

图片缩放

使用Canvas API调整图片尺寸,支持自由缩放和等比例缩放

核心技术Canvas API
缩放模式自由 / 等比例
插值算法高质量平滑
处理方式浏览器本地处理
选择图片文件 支持 PNG / JPEG / WebP / BMP 等格式
RESIZE
点击选择或拖拽图片到此处
所有处理在浏览器本地完成,不会上传服务器

图片缩放说明

本工具使用 HTML5 Canvas API 在浏览器本地调整图片尺寸,支持自由缩放和等比例缩放两种模式。

原理:创建指定尺寸的目标 Canvas,设置 imageSmoothingEnabled 和 imageSmoothingQuality 以获得高质量插值效果,再将原图绘制到目标 Canvas 上。

等比例缩放:点击锁形按钮锁定宽高比,修改宽度时高度自动按比例调整,反之亦然,确保图片不变形。

自由缩放:解锁宽高比后可独立设置宽度和高度,适用于需要拉伸或压缩图片到特定尺寸的场景。

快速缩放:提供 50%、75%、150%、200% 常用比例快捷按钮,一键设置目标尺寸。

插值算法:Canvas 默认使用高质量双线性插值算法,在缩小图片时效果尤为出色。放大图片时建议不超过 4 倍以避免明显模糊。

输出格式:可选择 PNG(无损)、JPEG(有损体积小)、WebP(高压缩比)三种格式输出。JPEG 和 WebP 支持质量参数调节。

用途:网页图片优化、缩略图生成、适配不同分辨率屏幕、控制图片文件大小等。

前端工具