Node实现网页截图
背景
用户不会实时去查看网页，所以每当数据有异常或者数据有更新时，用户都是延迟去反应的状态。
需求点：在指定场景下达到某数据触发点时，需实时向用户发送一条信息。
有同学就会问：发送一条消息不是很简单的一件事吗？这跟网页截图有啥关系呢？
首先，文本消息的内容有限，一段文字多了起来就显得很让人头疼，而精简的文本内容又提高了用户最少时间了解最多信息的门槛。所以采用网页截图的办法，基本上减少了用户一次点击网站的成本。
实现需求
截图神器：Puppeteer，附上地址（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;
// 测试一下
captureWebsite('https://juejin.cn');
二次包装升级版：capture-website，附上地址（www.npmjs.com/package/cap…
capture-website包在puppeteer基础上再次封装了一层，简化了很多操作，更容易理解并成功配置网页截图。
import captureWebsite from 'capture-website';
/** 截屏网页
* @param {string} url 网页地址
* @param {string} filename 写入文件名
* @param {number} height 截取高度，0或者不填默认全屏
* @param {number} delay 延迟秒数
*/
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;
// 测试一下
const imgPath = await webCapture('https://juejin.cn', 'test', 0);
坑点槽点
npm install 失败
看了上述引入包的说明，是不是觉得很简单，不就是引入一个npm包的问题嘛，so easy!
然而，真正在安装的时候是会报错误的，提示找不到相关依赖的包。
解决方式：
// 按照以下顺序安装包 以CentOS 8系统为例
1.yum install at-spi2-atk
2.yum install libxkbcommon
3.yum install gtk3
图片中文乱码
原因：Puppeteer是内嵌了一个chromium内核浏览器来实现headerless访问互联网能访问的网站，相对来说你的电脑或者开发机就是一台服务器。如果电脑或者开发机没有安装中文字库，毫无疑问是会乱码。
解决方式：
我的开发服务器：CentOS 8
我的电脑：Mac Pro
1.执行命令：yum -y install fontconfig
2.下载中文字体到本地，推荐地址（https://www.fonts.net.cn/fonts-zh/tag-heiti-5.html），字体有免费也有付费，按需下载。
3.将文件上传到/usr/shared/fonts/chinese 文件下（若无chinese文件，则创建它）
4.执行命令：chmod -R 755 /usr/share/fonts/chinese（获取该文件的操作权限）
5.执行命令：yum -y install ttmkfdir
6.执行命令：ttmkfdir -e /usr/share/X11/fonts/encodings/encodings.dir
7.执行命令：vi /etc/fonts/fonts.conf （修改配置文件）
8.在fonts.conf文件中插入：<dir>/usr/shared/fonts/chinese</dir>
9.执行命令：fc-cache （清除缓存）
10.执行命令：fc-list （如有看到所上传的字体，则表明已安装成功）
PS：参考地址（https://blog.csdn.net/wlwlwlwl015/article/details/51482065），这是windows系统下的解决方式。我的Mac没有宋体、黑体的ttf文件，所以去网上下载了一份。
图片模糊
原因：我认为是截取图片的大小是以系统的像素大小去截取的，我觉得有点类似于网站的截屏工具，所以如果给的图片宽度太小比如500的话，可能实际的效果就会有些模糊。
解决方式：可以截取一个大一倍宽度的图片（想要500，则传参1000），再引入一个无损压缩图片的npm包（imagemin、imagemin-pngquant）去压缩后存储。
