使用 puppeteer 截取屏幕截图并将其存储在谷歌云存储中

Question

我将立即描述我的最终目标：我希望能够使用 puppeteer 截取我网站的屏幕截图并将它们直接上传到谷歌云存储（例如使用云功能）。

但是，如果我没有提供本地存储文件的路径，我在实际上传文件时遇到了问题。这是我的代码：

(async () => {
  const browser = await puppeteer.launch({headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox']});
  const page = await browser.newPage();
  await page.goto('https://google.com');
  const filename = await page.screenshot();


    await storage.bucket(bucketName).upload(filename, {
        gzip: true,
})
  

console.log(`${filename} uploaded to ${bucketName}.`);
await browser.close();
})();

我尝试了多种方法，例如对图像进行不同编码并将其从缓冲区转换为字符串，但我一直遇到相同的两个错误，或者：

• “路径”参数必须是字符串类型。收到一个 Buffer 实例，或
• 参数“path”必须是字符串或不带空字节的 Uint8Array。

我感谢我能得到的所有帮助 :D 亲切的问候

Answer 1

有三种方法可以做到这一点。

1. 第一种方法是添加路径选项以page.screenshot()将屏幕截图存储在本地计算机中，然后添加此路径以 storage.bucket(bucketName).upload()将此图像上传到谷歌云。
2. 第二种方法是将截图图像作为 base64 编码，然后使用特定名称将其上传到谷歌云。
3. 第三种方式将屏幕截图图像作为二进制编码，然后使用特定名称将其上传到谷歌云。

• 第一种方式

(async () => {
    const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] });
    const page = await browser.newPage();
    await page.goto('https://google.com');
    await page.screenshot({
        path: `/screenshot.png`,
    });

    const bucket = storage.bucket('bucket_name');
    const options = {
        destination: 'puppeteer_screenshots/screenshot_XXX.png',
        gzip: true,
    };
    await bucket.upload(`/screenshot.png`, options);
    console.log("Created object gs://bucket_name/puppeteer_screenshots/screenshot_XXX.png");

    await browser.close();
})();

• 第二种方式

(async () => {
    const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] });
    const page = await browser.newPage();
    await page.goto('https://google.com');
    const screenshotBase64 = await page.screenshot({
        encoding: 'base64',
    });

    
    const bucket = storage.bucket('bucket_name');
    const file = bucket.file('puppeteer_screenshots/screenshot_XXX.png');
    await file.save(screenshotBase64, {
        metadata: { contentType: 'image/png' },
    });
    console.log("Created object gs://bucket_name/puppeteer_screenshots/screenshot_XXX.png");

    await browser.close();
})();

• 第三种方式

(async () => {
    const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] });
    const page = await browser.newPage();
    await page.goto('https://google.com');
    const screenshotBinary = await page.screenshot({ encoding: 'binary' });

    const bucket = storage.bucket('bucket_name');
    const file = bucket.file('puppeteer_screenshots/screenshot_XXX.png');
    await file.save(screenshotBinary, {
        metadata: { contentType: 'image/png' },
    });
    console.log("Created object gs://bucket_name/puppeteer_screenshots/screenshot_XXX.png");

    await browser.close();
})();

参考

• 傀儡师截图。
• 谷歌云存储（.upload）
• 谷歌云存储 (.save)