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

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

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

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

• dom-to-image:?

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

• html2canvas:?

  https://github.com/niklasvh/html2canvas

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

dom-to-image庫(kù)主要使用的是SVG實(shí)現(xiàn)方式，簡(jiǎn)單來(lái)說(shuō)就是先把DOM轉(zhuǎn)換為SVG然后再把SVG轉(zhuǎn)換為圖片。

（一）使用方式

首先，我們先來(lái)簡(jiǎn)單了解一下dom-to-image提供的核心api，有如下一些方法：

• toSvg (dom轉(zhuǎn)svg)

• toPng (dom轉(zhuǎn)png)

• toJpeg (dom轉(zhuǎn)jpg)

• toBlob (dom轉(zhuǎn)二進(jìn)制格式)

• toPixelData (dom轉(zhuǎn)原始像素值)

如需要生成一張png的頁(yè)面截圖，實(shí)現(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方法可傳入兩個(gè)參數(shù)node和options。

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

（二）原理分析

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

整體實(shí)現(xiàn)過(guò)程用到了幾個(gè)函數(shù)：

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

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

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

• cloneNode（克隆處理dom和css）

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

• toPng

toPng函數(shù)比較簡(jiǎn)單，通過(guò)調(diào)用draw方法獲取轉(zhuǎn)換后的canvas，利用toDataURL轉(zhuǎn)化為圖片并返回。

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

• draw

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

function draw(domNode, options) {  return toSvg(domNode, options)  // 拿到的svg是image data URL, 進(jìn)一步創(chuàng)建svg圖片    .then(util.makeImage)    .then(util.delay(100))    .then((image) => {      // 創(chuàng)建canvas，在畫(huà)布上繪制圖像并返回      const canvas = newCanvas(domNode);      canvas.getContext("2d").drawImage(image, 0, 0);      return canvas;    });  // 新建canvas節(jié)點(diǎn)，設(shè)置一些樣式的options參數(shù)  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函數(shù)實(shí)現(xiàn)從dom到svg的處理，大概步驟如下：

• 遞歸去克隆dom節(jié)點(diǎn)（調(diào)用cloneNode函數(shù)）

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

<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>

<b id="afajh"><abbr id="afajh"></abbr></b>

<th id="afajh"><progress id="afajh"></progress></th>