前端截图

[xlearns]

html2canvasa

dom-to-image

browserless

puppeteer

puppeteer截图原理

• 在puppeteer中，当需要对网页进行截图操作时，它会通过Chrome DevTools Protocol（CDP）向Chrome浏览器发送相应的命令来完成截图操作。具体地，当执行截图操作时，puppeteer会向Chrome浏览器发送一个“Screenshot”请求，并在请求中指定一些参数，例如要截取的屏幕范围、图片质量等。Chrome浏览器接收到这个请求后，会根据参数进行屏幕截图，并将结果返回给puppeteer。最后，puppeteer再将截图结果保存为文件或直接输出到控制台等。 总之，puppeteer通过CDP与Chrome浏览器进行交互，利用浏览器本身的能力来完成网页截图等操作，从而实现了更高效、更稳定的网页自动化测试和爬虫功能。

• 浏览器本身得能力是怎么来截图得

  • 浏览器本身提供的屏幕截图能力，是基于浏览器内置的渲染引擎来实现的。在Chrome浏览器中，渲染引擎是Blink，它与WebKit引擎高度相关。具体地，当浏览器需要进行屏幕截图时，它会使用Blink引擎将网页内容渲染到内存中的画布上，然后将渲染好的画布转换为图片格式，例如PNG或JPEG，并返回给调用者。在这个过程中，Blink引擎使用了各种图像处理和渲染技术，例如抗锯齿、像素合并、颜色校正等，以确保生成的图片质量尽可能高，并且呈现出与视觉上下文一致的效果。需要注意的是，不同浏览器厂商可能会有不同的实现方式和技术细节，但总体来说，浏览器通过渲染引擎实现屏幕截图的原理都是类似的。

• 通过Chrome DevTools Protocol向浏览器发送截图指令

  • 连接CDP：首先，需要使用WebSocket协议通过"ws://{host}:{port}/devtools/browser/{tabId}"连接到目标浏览器的CDP。
  • 启动屏幕截图：使用"Screencast.startScreencast"方法启动屏幕截图，并设置一些参数，例如截图格式、屏幕范围等。
  • 接收截图数据：启动了屏幕截图之后，可以通过监听"screencastFrame"事件接收每一帧的截图数据，该事件会在每一次截图完成后触发，并返回包含截图数据的Base64编码字符串。
  • 停止屏幕截图：当需要停止屏幕截图时，可以使用"Screencast.stopScreencast"方法来终止截图，并断开与浏览器的CDP连接。