2種方式！帶你快速實現(xiàn)前端截圖

導語?|?本文將介紹在前端開發(fā)中頁面截圖的兩種方式，包括對其實現(xiàn)原理和使用方式進行詳細闡述，希望能為更多前端開發(fā)者提供一些經驗和幫助。

頁面截圖功能在前端開發(fā)中，特別是營銷場景相關的需求中, 是比較常見的。比如截屏分享，相對于普通的鏈接分享，截屏分享具有更豐富的展示、更多的信息承載等優(yōu)勢。最近在需求開發(fā)中遇到了相關的功能，所以調研了相關的實現(xiàn)和原理。

前端要實現(xiàn)頁面截圖的功能，現(xiàn)在比較常見的方式是使用開源的截圖npm庫，一般使用比較多的npm庫有以下兩個：

• dom-to-image:?

  https://github.com/tsayen/dom-to-image

• html2canvas:?

  https://github.com/niklasvh/html2canvas

以上兩種常見的npm庫，對應著兩種常見的實現(xiàn)原理。實現(xiàn)前端截圖，一般是使用圖形API重新繪制頁面生成圖片，基本就是SVG（dom-to-image）和Canvas（html2canvas）兩種實現(xiàn)方案，兩種方案目標相同，即把DOM轉為圖片，下面我們來分別看看這兩類方案。

dom-to-image庫主要使用的是SVG實現(xiàn)方式，簡單來說就是先把DOM轉換為SVG然后再把SVG轉換為圖片。

（一）使用方式

首先，我們先來簡單了解一下dom-to-image提供的核心api，有如下一些方法：

• toSvg (dom轉svg)

• toPng (dom轉png)

• toJpeg (dom轉jpg)

• toBlob (dom轉二進制格式)

• toPixelData (dom轉原始像素值)

如需要生成一張png的頁面截圖，實現(xiàn)代碼如下：

import domtoimage from "domtoimage"
const node = document.getElementById('node');domtoimage.toPng(node,options).then((dataUrl) => {    const img = new Image();    img.src = dataUrl;    document.body.appendChild(img);})

toPng方法可傳入兩個參數node和options。

node為要生成截圖的dom節(jié)點；options為支持的屬性配置，具體如下：filter，backgroundColor，width，height，style，quality，imagePlaceholder，cacheBust。

（二）原理分析

dom to image的源碼代碼不是很多，總共不到千行，下面就拿toPng方法做一下簡單的源碼解析，分析一下其實現(xiàn)原理，簡單流程如下：

整體實現(xiàn)過程用到了幾個函數：

• toPng（調用draw，實現(xiàn)canvas=>png?）

• Draw（調用toSvg，實現(xiàn)dom=>canvas）

• toSvg（調用cloneNode和makeSvgDataUri，實現(xiàn)dom=>svg）

• cloneNode（克隆處理dom和css）

• makeSvgDataUri（實現(xiàn)dom=>svg data:url）

• toPng

toPng函數比較簡單，通過調用draw方法獲取轉換后的canvas，利用toDataURL轉化為圖片并返回。

function toPng(node, options) {  return draw(node, options || {})    .then((canvas) => canvas.toDataURL());}

• draw

draw函數首先調用toSvg方法獲得dom轉化后的svg，然后將獲取的url形式的svg處理成圖片，并新建canvas節(jié)點，然后借助drawImage()方法將生成的圖片放在canvas畫布上。

function draw(domNode, options) {  return toSvg(domNode, options)  // 拿到的svg是image data URL, 進一步創(chuàng)建svg圖片    .then(util.makeImage)    .then(util.delay(100))    .then((image) => {      // 創(chuàng)建canvas，在畫布上繪制圖像并返回      const canvas = newCanvas(domNode);      canvas.getContext("2d").drawImage(image, 0, 0);      return canvas;    });  // 新建canvas節(jié)點，設置一些樣式的options參數  function newCanvas(domNode) {    const canvas = document.createElement("canvas");    canvas.width = options.width || util.width(domNode);    canvas.height = options.height || util.height(domNode);    if (options.bgcolor) {      const ctx = canvas.getContext("2d");      ctx.fillStyle = options.bgcolor;      ctx.fillRect(0, 0, canvas.width, canvas.height);    }    return canvas;  }}

• toSvg

• toSvg函數實現(xiàn)從dom到svg的處理，大概步驟如下：

• 遞歸去克隆dom節(jié)點（調用cloneNode函數）

• 處理字體，獲取所有樣式，找到所有的@font-face和內聯(lián)資源，解析并下載對應的資源，將資源轉為dataUrl給src使用。把上面處理完的css rules放入

  <table id="7actg"></table>
<address id="7actg"></address>
<address id="7actg"></address>
<object id="7actg"><tt id="7actg"></tt></object>