node puppeteer截图

最新推荐文章于 2024-07-12 16:27:40 发布

cxylcc

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量191

点赞数

分类专栏： nodeJs 前端文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/cxylcc/article/details/129171832

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

nodeJs

3 篇文章 0 订阅

订阅专栏

puppeteer（[ˌpʌpɪˈtɪr]）

使用puppeteer完成海报生成优化

涉及业务：

由于前端生成海报需要考验的是电脑的性能问题，在生成大量海报时，断然不能在前端生成，会导致生成时间过长，或浏览器进入卡死状态！！！
那就换个思路，通过node层生成，服务器生成海报？那肯定不能全靠服务器，服务器画海报还是不行，还得借助前端！！！

实现优化思路：

前端提供海报模板和样式
服务器通过无头浏览器，无形中浏览前端模板
并截图海报模板
最后再通过队列异步的方式返回
这样异步等待时间，不需要同步的等待生成

截图页面示例

const puppeteer = require("puppeteer");
const fs = require("fs");

(() => {
  puppeteer
    .launch({
      // 是否启用无头浏览器
      headless: true,
    })
    .then(async (browser) => {
      const page = await browser.newPage();
      await page.goto(
        "https://edu-admin.qlchat.com/"
      );
      const dimensions = await page.evaluate(() => {
        // 执行js脚本获取截图部分
        return {
          width: document.querySelector(".login-wrap").getBoundingClientRect()
            .width,
          height: document.querySelector(".login-wrap").getBoundingClientRect()
            .height,
          x: document.querySelector(".login-wrap").offsetLeft,
          y: document.querySelector(".login-wrap").offsetTop,
        };
      });
      const clipArea = {
        width: dimensions.width,
        height: dimensions.height,
        x: dimensions.x,
        y: dimensions.y,
      };
      console.log("Dimensions:", dimensions);
      // await page.setViewport({width: 1800, height:1400});

      // 截图图片路径
      // const imgPath = './' + Date.now() + 'test.png';
      const imgPath2 = './test.png';

      // 删除上次
      if(fs.existsSync(imgPath2)) {
        fs.unlinkSync(imgPath2);
      }

      // 延时
      const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
      await delay(500);

      /**
       * 文档地址 http://www.puppeteerjs.com/#?product=Puppeteer&version=browsers-v0.0.2&show=api-pagescreenshotoptions
       * @returns buffer缓存
       */
      await page.screenshot({
        type: "jpeg",
        quality: 100,
        path: imgPath2,
        clip: clipArea,
      });
      
      // const imgBase64 = imgBuffer.toString('base64');
      // const imgBase64Url =  "data:image/png;base64," + imgBase64;
      // // console.log("🚀 ~ file: capture.js:43 ~ .then ~ imgBase64Url", imgBase64Url)
      // const dataBuffer = Buffer.from(imgBase64, 'base64');
      // fs.writeFileSync('./avatar3.png', dataBuffer, function(err) {
      //   if(err) {console.log(err)}
      // });
      
    });
})();