Playwright中Chrome有头与无头模式下图片转base64结果不一致是什么原因

常见原因 #

• 旧版Chrome无头模式实现差异：Chrome早期的无头模式（对应Playwright配置headless: true）是独立于有头模式的独立分支实现，图像处理、元数据解析逻辑和有头模式并不完全对齐，这是这类差异最常见的诱因。Chrome 112之后推出的新版无头模式（headless: 'new'）已经和有头模式共享底层逻辑，不存在这类差异。
• EXIF元数据处理逻辑不同：你的代码中调用了EXIF.getData读取图片的EXIF信息，有头模式默认会保留完整的EXIF元数据，而旧版无头模式可能会自动丢弃或修正部分EXIF字段（比如图片方向、拍摄设备信息等），readAsDataURL会把元数据一并编码进base64，最终导致全量字符串不一致。
• 图片编码参数差异：如果你注释的// more code here部分存在canvas重绘、图片二次编码逻辑，无头模式默认的色域、JPEG/WebP编码质量参数和有头模式可能存在差异，也会导致输出的base64不一致。

修复方案 #

• 优先切换为新版Chrome无头模式，修改Playwright配置即可：

// playwright.config.js 配置示例
const { defineConfig } = require('@playwright/test');

module.exports = defineConfig({
  use: {
    headless: 'new',
    // 其余原有配置保持不变
  }
});

• 若不需要校验EXIF元数据，可在转base64前剥离图片的EXIF信息，只对比图片像素编码部分的内容，避免元数据差异导致的误判。
• 更稳定的校验方案是将base64转回图片二进制，直接对比像素值，彻底规避元数据、编码参数差异带来的影响。

内容的提问来源于stack exchange，提问作者Marco.S