Azure Ubuntu虚拟机中Puppeteer抓取WhatsApp Web二维码异常问题

AI 小北

2026-7-27

WhatsApp Web Puppeteer二维码截图异常问题

问题背景

在Azure的Ubuntu虚拟机上，基于Puppeteer开发WhatsApp Web爬虫，需要通过扫码完成登录，计划用sendQRcode()函数将二维码截图返回给API调用端以便扫码。但虚拟机上的Chromium截图无法正常显示二维码，本地环境则完全正常。

相关代码

主逻辑代码

const browser = await puppeteer.launch({ 
      executablePath: '/usr/bin/chromium-browser',
      headless: true });
      const page = await browser.newPage();
      const groupName = "testbot";
      await page.goto("https://web.whatsapp.com/");
      await page.setDefaultTimeout(0);

      await sendQRcode(page,res);

// 后续setTimeout爬虫逻辑...

sendQRcode函数

async function sendQRcode(page,res)
{
  //await page.waitForSelector('[aria-label="Scan me!"]');
  const image = await page.screenshot({fullPage : true});
  res.set('Content-Type', 'image/png');
  res.send(image);
}

解决建议

等待二维码完全加载再截图：虚拟机的网络或渲染速度可能慢于本地，当前代码未等待二维码元素生成就截图。取消注释等待选择器的代码，或者更精准等待二维码画布元素：
```
await page.waitForSelector('canvas[aria-label="Scan me!"]', { timeout: 60000 });
```
改用新无头模式：旧版无头模式对部分页面渲染支持不足，将headless: true改为headless: "new"（需Puppeteer v19及以上版本）
设置浏览器窗口尺寸：无头模式默认窗口过小可能导致二维码渲染不全，启动时添加窗口参数：
```
args: ['--window-size=1280,720']
```
只截取二维码区域：全页截图可能引入不必要的渲染问题，直接定位二维码元素截图：
```
const qrElement = await page.$('canvas[aria-label="Scan me!"]');
const image = await qrElement.screenshot();
```
检查Chromium版本兼容性：确保虚拟机中的Chromium版本与当前使用的Puppeteer版本匹配，版本不兼容会导致渲染异常