Node implements web page screenshots

background

Users do not view the web page in real time, so whenever there is abnormal data or data update, users are in a state of delayed response.

Requirement point: When a data trigger point is reached in a specified scenario, a message must be sent to the user in real time.

Some students will ask: isn’t it very simple to send a message? What does this have to do with screenshots?

First of all, text messages are limited in content, and multiple paragraphs of text can be a headache, while concise text content raises the threshold for users to get the most information in the least amount of time. Therefore, the method of using webpage screenshots basically reduces the cost of a user clicking on the website.

Implementation requirements

Screenshot artifact: Puppeteer, attach address (www.npmjs.com/package/pup…

// capture-website.ts
import puppeteer from 'puppeteer';

const captureWebsite = async (url, options): Promise<void> = > {const browser = await puppeteer.launch({
    headless: true});const page = await browser.newPage();
  await page.goto(url, options);
  await page.screenshot({
        path: './screenshot/test.png'})};export default captureWebsite;

// Test it
captureWebsite('https://juejin.cn');
Copy the code

Secondary packaging upgrade version: the capture – website, attach address (www.npmjs.com/package/cap…

The Capture-Website package is layered on top of puppeteer, simplifying operations and making it easier to understand and successfully configure web screenshots.

import captureWebsite from 'capture-website';

/** Screenshot of web page *@param {string} Url Web page address *@param {string} Filename indicates the filename *@param {number} Height Intercept height, 0 or default full screen *@param {number} Delay Number of delay seconds */
const captureWebsite = async (url, filename, height, delay = 2) :Promise<string> => {
  const filePath = `${__dirname}/screenshorts/${filename}.png`;
  await captureWebsite.file(url, filePath, {
      launchOptions: {
        args: ['--no-sandbox'.'--disable-setuid-sandbox'].headless: true.ignoreHTTPSErrors: true,
      },
      delay,
      fullPage: !height,
      emulateDevice: 'iPhone 8'});return filePath;
}

export default captureWebsite;

// Test it
const imgPath = await webCapture('https://juejin.cn'.'test'.0);
Copy the code

Pit slot

NPM install failure

The introduction of a NPM package is a problem, so easy!

However, an error will be reported during the actual installation, indicating that the related dependency package can not be found.

Solution:

CentOS 8 is used as an example
1.yum install at-spi2-atk
2.yum install libxkbcommon 
3.yum install gtk3
Copy the code
Picture Chinese garbled

Reason: Puppeteer is an embedded Chromium browser that allows Headerless access to web-accessible sites, so your computer or development machine is a server. If the computer or developer does not install the Chinese character library, there is no doubt that it will be garbled.

Solution:

My development server: CentOS 8

My computer: Mac Pro

1.Run yum -y install fontconfig2.Download Chinese font to local, recommended address (HTTPS://www.fonts.net.cn/fonts-zh/tag-heiti-5.html), fonts are available for free and paid, downloadable on demand.
3.Upload the file to the/usr/Shared/fonts/Chinese files under (without Chinese files, create it)4.Run the chmod -r command755/usr/share/fonts/ Chinese5.Yum -y install ttmkfdir6.Execute the command: ttmkfdir - e/usr/share/X11 / fonts/encodings/encodings. Dir7.Run the vi /etc/fonts. conf command: vi /etc/fonts. conf8.In the fonts.conf file insert: <dir>/usr/shared/fonts/chinese</dir>
9.Run: fc-cache (clear cache)10.Run the fc-list command. If you can see the uploaded font, the installation is successful. PS: Reference address (HTTPS:/ / blog.csdn.net/wlwlwlwl015/article/details/51482065), which is under the Windows system solution. My Mac doesn't have a 宋体, boldface TTF file, so I went online and downloaded one.
Copy the code
Image fuzzy

Reason: I think the size of the captured picture is the pixel size of the system. I think it is similar to the screen capture tool of the website. So if the width of the picture is too small, such as 500, the actual effect may be a little blurred.

Solution: You can intercept a double width image (want 500, then pass 1000), and then introduce a lossless compression image NPM package (Imagemin, Imagemin-pngquant) to compress after storage.