灵域,完美世界官网

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

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

一、背景

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

二、相關(guān)技術(shù)

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

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

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

三、 dom-to-image

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

（一）使用方式

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

toSvg (dom轉(zhuǎn)svg)
toPng (dom轉(zhuǎn)png)
toJpeg (dom轉(zhuǎn)jpg)
toBlob (dom轉(zhuǎn)二進制格式)
toPixelData (dom轉(zhuǎn)原始像素值)

如需要生成一張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方法可傳入兩個參數(shù)node和options。

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

（二）原理分析

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

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

toPng（調(diào)用draw，實現(xiàn)canvas=>png ）
Draw（調(diào)用toSvg，實現(xiàn)dom=>canvas）
toSvg（調(diào)用cloneNode和makeSvgDataUri，實現(xiàn)dom=>svg）
cloneNode（克隆處理dom和css）
makeSvgDataUri（實現(xiàn)dom=>svg data:url）
toPng

toPng函數(shù)比較簡單，通過調(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é)點，然后借助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é)點，設(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ù)實現(xiàn)從dom到svg的處理，大概步驟如下：
遞歸去克隆dom節(jié)點（調(diào)用cloneNode函數(shù)）
處理字體，獲取所有樣式，找到所有的@font-face和內(nèi)聯(lián)資源，解析并下載對應(yīng)的資源，將資源轉(zhuǎn)為dataUrl給src使用。把上面處理完的css rules放入