调整尺寸图片像素

使用方法

调整尺寸图片像素是「选图、设尺寸、点调整」三步：

1. 「选择图片」挑一张本地图，载入后上方会显示原图尺寸。
2. 「缩放模式」选自定义、按宽度等比、按高度等比或百分比；填目标宽高或百分比，演示按宽度 400。
3. 点「调整尺寸」，预览图与结果尺寸出现在下方；满意后点「下载结果」存成 PNG/JPEG/WebP；质量滑块控制 JPEG/WebP 的清晰度与体积。

调整尺寸图片像素能解决什么

它把「图太大/比例不对」变成一步导出，适合三类场景：

• 头像与封面：微信头像要 640×640、公众号封面要 1080×460，原图随便传一张，等比缩到目标宽高就能用，演示里 800×600 缩到宽 400 得 400×300。
• 配图适配：网页 Banner、商品主图常要固定像素，用自定义模式直接拉伸到指定宽高，或用百分比批量同比例缩小。
• 体积优化：选 JPEG/WebP 再把质量调到 0.8 左右，能在肉眼几乎无差的情况下大幅压小体积，方便上传。

本页不做的事：不裁剪（只整体缩放）；不做旋转与滤镜；不批量处理多张（一次一张）。需要裁切请用对应裁剪工具，多图批量可逐张处理。

原理和变量

① 用了哪个具体函数：核心是 Canvas 的 drawImage(img, 0, 0, w, h) 把原图重绘到目标尺寸的画布，再用 canvas.toBlob(cb, fmt, q) 导出；原图尺寸读 img.naturalWidth/naturalHeight。

② 关键参数为什么这样取：等比模式锁宽高比，是因为直接拉成任意宽高会把人拉变形；像素上限 10000 是为了防止画布过大卡死浏览器；质量 0.1～1 在「体积 vs 清晰」间取舍，默认 0.92 兼顾两者。

③ 遵循哪个标准：输出为标准位图（PNG/JPEG/WebP），由浏览器原生编解码，不依赖服务器；透明通道只在 PNG 保留，JPEG/WebP 导出前铺白底以保证无黑边。

④ 输入怎么变成输出：演示原图 800×600，按宽度 400 时高度 = round(400 × 600 / 800) = 300，画布设为 400×300 后重绘，得到 400×300 的新图；百分比 50% 则宽高各乘 0.5 得 400×300。

⑤ 边界与阈值：宽高限 1～10000 像素；非图片文件会被拦下并提示；百分比限 1～500；原图超大时先限制画布上限以免内存溢出；质量越高质量越大。

⑥ 常见误用的正确解释：把「百分比 200」理解为「边长翻倍」没错，但面积是原来的 4 倍、体积也会涨；非等比拉伸会变形；JPEG 不保透明，透明 PNG 转 JPEG 会变白底而非黑底。

完整示例（数值仅作演示）

原图 800×600，按不同模式处理：

• 按宽度等比 400：高度 = round(400×600/800) = 300，输出 400×300。
• 按高度等比 300：宽度 = round(300×800/600) = 400，输出 400×300。
• 百分比 50%：800×0.5=400、600×0.5=300，输出 400×300。
• 自定义 400×400：直接拉伸，输出 400×400（比例被改变）。
• 若选 JPEG 质量 0.8：在 400×300 基础上压小体积，透明区变白底。

这几种结果都与上方工具默认提示一致，可对照验证。

输入范围与对照表

调整尺寸图片像素的对照表列出常见平台推荐的图片尺寸预设（宽×高，像素）：

对照表能看出不同场景的像素预期；用「自定义」模式直接填对应宽高，即可对齐这些规格。

结果边界和舍入

舍入位置：等比算出的另一维用 Math.round 取整到整数像素，不会出现半像素；非整数百分比也先四舍五入再绘图。

什么时候会拒绝：未选图片、所选不是图像文件、宽高不在 1～10000、百分比不在 1～500 时，会给出具体中文提示并停下，不会生成错图。

格式与透明：PNG 保留透明；JPEG/WebP 无透明通道，导出前铺白底。质量只影响 JPEG/WebP，对 PNG 无效。

结果性质：这是本地重绘的位图，不联网、不存储原图；画质受原图分辨率限制，放大超过原尺寸会糊，属正常插值结果。

常见问题

相关工具

• 图片压缩工具：调完尺寸顺手压体积。
• 图片裁剪工具：先裁再调尺寸更精准。
• PNG 转 JPG：需要换格式时配套使用。
• 平方根计算器：顺手做尺寸换算。
• 字数统计：处理图文文案时计数。
• 密码生成器：给图片包配套生成密码。
• JSON 格式化：整理图片元数据。