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();