整个九月份由于业务繁重以及玩心颇重，一直没有机会来写一篇博文。而且笔者于十月一日将会举办人生大事--婚礼，现在家里筹办过程中只能抽出零碎的时间来写这篇文章。

关于服务端截图，这种使用场景非常少见，大多服务器不同于PC机器并不提供相关图形界面以及图形库，所以对不同的系统的不同版本的服务器需要安装不同的共享库。同时，截图依赖的浏览器服务也存在很多兼容性问题，好在google提供了puppeteer模块依赖于webkit内核，这与大多数业务场景的渲染引擎一致，因此我们可大致忽略引擎渲染的差异(大多数差异在于引擎版本、画图库与字体库导致)。

页面截图与元素块截图

puppeteer是nodejs社区中的提供API操作Chromium的npm模块，具体的安装方式可参考官方文档。

进行页面截图：

const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto('https://example.com',{

waitUntil: 'networkidle2'

});

await page.screenshot({path: 'example.png'});

await browser.close();

})();

puppeteer自带全局截图，文档中也提供了相关示例。

可大多数场景是针对页面的某个DOM元素区域进行局部截图，这就需要依赖puppeteer提供的在当前页面执行js的功能，通过定位DOM元素计算该元素的位置和盒子模型的信息，计算出DOM元素的坐标值，进行裁剪。

局部截图

通过evaluate接口在页面上下文执行js：

async screenshotDOMElement(page, selector, path, padding = 0) {

const rect = await page.evaluate(selector => {

try{

const element = document.querySelector(selector);

const {x, y, width, height} = element.getBoundingClientRect();

if(width * height != 0){

return {left: x, top: y, width, height, id: element.id};

}else{

return null;

}

}catch(e){

return null;

}

}, selector);

return await page.screenshot({

path: path,

clip: rect ? {

x: rect.left - padding,

y: rect.top - padding,

width: rect.width + padding * 2,

height: rect.height + padding * 2

} : null

});

}

let puppeteer = require('puppeteer');

const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});

const page = await browser.newPage();

page.setViewport({width: 1580, height: 1024, deviceScaleFactor: 2});

// 使用管理员的cookie

var cookie = {

name: "vdian-fe-l-u",

value: "eyJpZCI6InlhbmdIm5hbWUiOiLmnajldsafds",

domain: ip.trim(),

path: "/",

expires: Date.now() + 3600 * 1000

};

await page.setCookie(cookie); // 设置cookie

await page.goto(pageUrl, {

waitUntil: 'networkidle2'

});

await screenshotDOMElement(page,"[data-share-wrapper]",savedPath);

await browser.close();

服务器依赖配置

目前社区内部对于Centos6的系统没有提供相关依赖解决方案，笔者也针对Centos6做了1天的尝试，确实无法正常运行，主要是缺少了几个共享库导致，并且无法在Centos6上正确安装。

因此下文的依赖安装仅仅针对 Centos7 系统而言：

#依赖库

yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 nss.x86_64 -y

#字体

yum install ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc -y

同时，在机器中安装puppeteer执行如下命令：

npm install puppeteer --unsafe-perm=true

设置unsafe-perm为true，则是为了避免npm在执行puppeteer包的脚本的时候随意切换UID/GID，如果使用默认的unsafe-perm=false，则会以非root身份安装puppeteer导致出错。

中文编码乱码问题

服务器安装中文字体，关于中文字体安装，请参考 给CentOS安装中文字体

页面编码为“utf-8”，即

记录一次linux线上服务器被黑事件

1.原因:本来在家正常休息了,我们放在上海托管机房的线上服务器突然蹦了远程不了,服务启动不了,然后让上海机房重启了一次,还是直接挂了,一直到我远程上才行. 2.现象:远程服务器发现出现这类信息 Hi, ...

线上服务器上安装的VNCServer不能正常工作

1.问题描述: 线上服务器上安装的不能正常工作 2.解决问题过程: 一. 重启vncserver 运行命令:vncserver -kill :1和vncserver :1 二. 发现vncserver ...

【效率工具】SSH一键登录脚本(可一键从跳板机登录线上服务器)

说明 前阵子上线,一次性上了十个服务,一直上到凌晨才完事,期间每个服务都要先输入跳板机的登录信息来登录跳板机,然后再输入线上服务器的信息来登录线上服务器,实在是太过于麻烦,而且有些服务还有好几台服务器 ...

分享下使用 svn，测试服务器代码自动更新、线上服务器代码手动更新的配置经验

分享下使用 svn,测试服务器代码自动更新.线上服务器代码手动更新的配置经验 利用SVN的POST-COMMIT钩子自动部署代码 Linux SVN 命令详解 Linux SVN 命令详解2 使用sv ...

本地数据库导入线上服务器的mongodb中

更改默认端口 sudo vi /etc/mongod.conf 进入conf文件,修改port值为19999保存并退出. 重启mongodb sudo service mongod restart 进 ...

线上服务器TCP被打满是啥情况

从一个线上服务器警告谈谈backlog https://wangxiangnan.cc/?p=105 缘起 双十一如期而至,此时的我因为在处理客户的一个问题已经陷入了忙碌.突然,不断接到驻场实施发来的 ...

线上服务器CPU彪高的调试方式

原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接:https://app.yinxiang.com/shard/s17/nl/19391737/2fee7b91-f ...

运维笔记--线上服务器git环境配置

场景描述: 我们采用git去管理代码分支,本地开发环境,线上服务器多数情况下也会使用git去管理程序代码,那么新的一台服务器,如果指定了目标路径作为代码存放路径,该如何配置git环境, 以达到跟远程服 ...

线上服务器CPU100%排查，Linux进程消耗查看

线上服务器CPU100%排查,Linux进程消耗查看 1.排查步骤 1.1Linux下排查 1.1.1查消耗cpu最高的进程PID 1.1.2根据PID查出消耗cpu最高的线程号 1.1.3根据线程号 ...

随机推荐

border-radius结合transition的一个小应用(动画)

...

UIScrollView出现位移问题

啦啦啦啦啦~~~ UINavigationController和UIScrollView一起使用时会导致UIScrollView位置偏移 情况:UINavigationController的视图上的第 ...

poj 2484 A Funny Game(博弈)

A Funny Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4639   Accepted: 2855 Desc ...

C# Hex编码和解码

/// 从字符串转换到16进制表示的字符串 /// 编码,如"utf-8","gb2312" /// 是否每字符用逗号分隔 public static stri ...

迭代加深搜索 C++解题报告 ：[SCOI2005]骑士精神

题目 此题根据题目可知是迭代加深搜索. 首先应该枚举空格的位置,让空格像一个马一样移动. 但迭代加深搜索之后时间复杂度还是非常的高,根本过不了题. 感觉也想不出什么减枝,于是便要用到了乐观估计函数(O ...

24小时学通Linux内核之电源开和关时都发生了什么

说实话感觉自己快写不下去了,其一是有些勉强跟不上来,其二是感觉自己越写越差,刚开始可能是新鲜感以及很多读者的鼓励,现在就是想快点完成自己制定的任务,不过总有几个读者给自己鼓励,很欣慰的事情,不多感慨了 ...

iOS 本地加载js文件

#import "RootViewController.h" @interface RootViewController () @ ...

使用聚合数据的接口进行的RxAndroid学习

Demo数据源是聚合数据的免费Api,地址:https://www.juhe.cn/ 配合Retrofit 完成数据请求 例子比较简单,没事使用什么复杂的操作符. 就是简单的网络数据获取. 一些常用的 ...

LightOJ 1068 Investigation (数位dp)

problem=1068">http://www.lightoj.com/volume_showproblem.php?problem=1068 求出区间[A,B]内能被K整除且各位数 ...

springboot springmvc 抛出全局异常解决方法

springboot中抛出异常,springboot自带的是springmvc框架,这个就不多说了. springmvc统一异常解决方法这里要说明的是.只是结合了springboot的使用而已.直接上 ...