整个九月份，由于业务繁重和贪玩，一直没有机会写博文。而且，作者将在10月1日举行人生大事——婚礼，现在只能在家里准备的过程中抽空写这篇文章。关于服务器端截图，这种使用场景是非常少见的。大多数服务器不同于PC，不提供相关的图形界面和图形库。因此，不同系统的不同版本的服务器需要安装不同的共享库。同时，截图依赖的浏览器服务也存在很多兼容性问题。好在Google提供了一个依赖于webkit内核的puppeteer模块，它与大部分业务场景的渲染引擎是一致的，所以我们可以大致忽略引擎渲染的差异（大部分差异在于引擎版本、绘图库和字体图书馆）。页面截图和元素块截图Puppeteer是nodejs社区中的一个npm模块，提供了操作Chromium的API。具体安装方法请参考官方文档。页面截图：constpuppeteer=require('puppeteer');(async()=>{constbrowser=awaitpuppeteer.launch();constpage=awaitbrowser.newPage();awaitpage.goto('https://example.com',{waitUntil:'networkidle2'});awaitpage.screenshot({path:'example.png'});awaitbrowser.close();})();puppeteer自带全局截图，文档中也提供了示例。但是大部分场景都是对页面的某个DOM元素区域进行局部截图，这就需要依赖puppeteer提供的函数在当前页面执行js，通过定位DOM元素来计算元素的位置以及盒子模型的信息，并计算出DOM元素的坐标值进行裁剪。局截图通过evaluate接口在页面上下面执行js：asyncscreenshotDOMElement(page,selector,path,padding=0){constrect=awaitpage.evaluate(selector=>{try{constelement=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{返回空值；}}catch(e){返回空值；}}，选择器）；returnawaitpage.screenshot({path:path,clip:rect?{x:rect.left-padding,y:rect.top-padding,width:rect.width+padding*2,height:rect.height+padding*2}:null});}letpuppeteer=require('puppeteer');constbrowser=awaitpuppeteer.launch({args:['--no-sandbox','--disable-setuid-sandbox']});constpage=awaitbrowser.newPage();page.setViewport({width:1580,height:1024,deviceScaleFactor:2});//使用管理员的cookievarcookie={name:"vdian-fe-l-u",value:"eyJpZCI6InlhbmdIm5hbWUiOiLmnajldsafds",domain:ip.trim(),path:"/",expires:Date.now()+3600*1000};awaitpage.setCookie(cookie);//setcookieawaitpage.goto(pageUrl,{waitUntil:'networkidle2'});awaitscreenshotDOMElement(page,"[data-share-wrapper]",savedPath);awaitbrowser.close();服务器依赖配置目前，社区没有提供Centos6系统的相关依赖解决方案，笔者也针对Centos6做了一天的尝试，无法正常使用，主要是缺少几个共享库，无法在Centos6上正确安装因此下文的依赖安装仅仅针对Centos7系统而言：#依赖库yuminstallpango.x86_64libXcomposite.x86_64libXcursor.x86_64libXdamage.x86_64libXext.x86_64libXi.x86_64libXtst.x86_64cups-libs.x86_64libXScrnSaver.x86_64libXrandr.x86_64GConf2.x86_64alsa-lib.x86_64atk.x86_64gtk3.x86_64nss.x86_64-y#fontsyuminstallipa-gothic-fontsxorg-x11-fonts-100dpixorg-x11-fonts-75dpixorg-x11-utilsxorg-x11-fonts-cyrillicxorg-x11-fonts-Type1xorg-x11-fonts-misc-y同时在机器上安装puppeteer，执行以下命令：npminstallpuppeteer--unsafe-perm=true设置unsafe-perm为true是为了避免npm在执行puppeteer包的脚本时随意切换UID/GID。如果你使用默认的unsafe-perm=false，你将以非root身份安装puppeteer并导致错误。中文代码乱码问题服务器上安装了中文字体。中文字体安装请参考CentOS安装中文字体页面。编码为“utf-8”，即
