突破像素限制：Pageres scale选项让截图清晰度提升200%的实战指南

你是否遇到过这样的情况：用工具截取的网页截图放大后模糊不清？客户投诉产品截图细节丢失？运营同事反馈宣传素材分辨率不足？Pageres的scale选项（缩放因子）正是解决这类问题的关键功能。通过本文你将掌握：scale参数的工作原理、3种核心应用场景、2组对比案例及完整配置流程，让普通截图秒变高清素材。

scale选项核心原理

scale选项（缩放因子）通过像素倍增技术提升截图分辨率，定义在source/index.ts中：

/**
Scale webpage `n` times.
@default 1
*/
readonly scale?: number;

当设置scale: 2时，实际生成的图片尺寸将是指定尺寸的2倍。例如指定120x120尺寸配合scale: 2，最终输出为240x240像素的高清图像(test/test.ts)。这不同于简单的图片放大，而是在渲染阶段就提升细节精度，避免像素化模糊。

三种核心应用场景

1. 高清素材制作

电商平台需要高分辨率商品展示图时，可配合crop选项精准控制输出尺寸：

await new Pageres({
  scale: 2,       // 2倍分辨率
  crop: true      // 精准裁剪
})
.source('https://example.com/product', ['800x600'])
.destination('high-res-screenshots')
.run();

2. 多端适配素材

通过一次配置生成不同DPI设备所需素材，避免重复截图：

// 生成标准和2倍图两套素材
await new Pageres()
.source('https://example.com', ['1024x768'], {scale: 1})  // 标准图
.source('https://example.com', ['1024x768'], {scale: 2})  // 高清图
.destination('multi-dpi-assets')
.run();

3. 细节放大展示

技术文档需要突出界面细节时，使用高缩放因子配合选择器截取特定区域：

await new Pageres({
  scale: 3,          // 3倍放大
  selector: '#code'  // 仅截取代码区域
})
.source('https://example.com/docs', ['1200x800'])
.run();

效果对比与性能考量

测试数据表明，在相同显示尺寸下：

scale值	文件体积增加	渲染时间增加	细节保留
1x	基准大小	基准时间	标准细节
2x	~300%	~150%	丰富细节
3x	~600%	~250%	极致细节

建议根据实际需求平衡质量与性能，普通网页推荐使用scale: 2，图表类内容可尝试scale: 3。项目测试案例test/test.ts验证了不同缩放值的实际渲染效果。

完整配置流程

1. 安装Pageres

npm install pageres

2. 基础缩放配置
   创建脚本文件example-scale.js：

import Pageres from './dist/index.js';

// 2倍缩放配置示例
await new Pageres({
  scale: 2,          // 核心缩放参数
  delay: 1,          // 等待页面加载完成
  format: 'png'      // 保留透明背景
})
.source('https://gitcode.com/gh_mirrors/pa/pageres', ['1200x800'])  // 目标页面与基础尺寸
.destination('screenshots/scale-2x')  // 输出目录
.run();

console.log('高清截图已生成');

3. 执行脚本

node example-scale.js

4. 验证结果
   检查输出目录中的图片尺寸是否为预期的2倍大小（2400x1600像素）。

注意事项与高级技巧

• 内存限制：scale: 3以上可能导致大尺寸截图内存溢出，建议配合selector局部截取
• 格式选择：JPEG格式在高缩放时文件体积增长更明显，优先使用PNG
• 延迟设置：复杂页面需增加delay确保渲染完成再截图
• 版本兼容：确保使用Pageres 9.0.0+版本，该功能定义于source/index.ts

通过合理配置scale选项，Pageres能轻松满足从移动端图标到4K宣传图的各种分辨率需求。更多参数细节可参考官方文档，遇到问题可查阅贡献指南获取支持。