【SSD系列】網頁內容生成圖片，這18般武藝你會幾種呢？

這是我參與8月更文挑戰的第7天，活動詳情查看：8月更文挑戰。

前言

關於【SSD系列】：
前端一些有意思的內容，旨在3-10分鐘裏， 500-1000字，有所獲，又不爲所累。

網頁截圖，windows內置了快捷命令和軟件，chrome開發者工具也能一鍵截圖，html2canvas和無頭瀏覽器均可以實現，您須要哪種呢？

爲了方便移動端閱讀，列一個大綱：

• windows 內置
  • window 內置快捷鍵截圖
  • windows 內置軟件截圖
• window 第三方程序
  • 聊天辦公軟件
  • 其餘軟件
• chrome瀏覽器
  • chrome 開發者工具
  • chrome 插件
• 網頁內代碼生成截圖
  • 基於canvas的 html2canvas
  • 基於SVG的 dom-to-image 和 rasterizeHTML.js
• 無頭瀏覽器 puppeteer等

windows自帶

1.1 window 內置快捷鍵

可能不少人習慣了微信，QQ,釘釘的快捷截圖，卻不知道，系統已自帶。

1. Ctrl+shift+X
   可選擇截圖範圍。

2. Ctrl + PrScrn
   接截取全屏

3. Alt + PrScrn
   截取全屏

1.2 windows 內置軟件

winodws10 其實自帶了截圖工具，你搜索 截圖

或者cmd 輸入 SnippingTool.exe， 您就能夠進行截圖了，體驗比微信查一些，可是一種備用方案。

window 第三方程序

2.1 聊天辦公工具

微信，QQ, 釘釘等等都自帶截圖功能。

2.2 其餘工具

有不少，我就推薦一下 Snipaste , 能夠截圖多張，放在桌面上，配合 天若OCR 圖片轉文字，堪稱完美。 別人貼的圖片代碼，分分鐘變成文字，直接使用。

chrome瀏覽器

3.1 chrome 開發者工具

先 ctr + shift + i 喚起開發者工具，再ctr + shift + p 喚起chrome的命令程序， 以下看以下動圖：

四種：

1. Capture area screenshot
   選擇頁面某部分進行截圖。

2. Capture full size screenshot
   截頁面全屏，包含可視區外的部分。

3. Capture node screenshot
   截取某個節點的內容，須要先從Elements Tab先選中某個節點。 當你選中 body或者html節點的時候，某種程度等於Capture full size screenshot

4. capture screenshot
   截取頁面可視區部分。

3.2 chrome 插件

Awesome Screenshot，Full page Screen Capture, Webpage Screenshot 等等都是不錯的網頁截圖插件。

更多的嘛，去谷歌應用市場，至於那個啥，我就再推薦一款免費開源的 freefq 的軟件。 chrome-go和 谷谷訪問助手插件也值得去試試。

基於瀏覽器API

其基本實現原理，一種是基於SVG，一種是基於Canvas。

4.1 基於canvas的 html2canvas

這個庫，可能無人不知。 其就是將元素節點畫到canvas上，而後生成截圖，可是沒法渲染iframe，flash等內容。

其基於Promise編寫，若是低版本瀏覽器，本身找個墊片就行了，使用也極其簡單。

下面是代碼：

<h1>雲的世界</h1>
    <div>看什麼看，看完記得點贊</div>
    <img crossorigin="anonymous" src="https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/f1a9f122e925aeef5e4534ff7f706729~300x300.image" />
    <div>
        <button onclick="onSnapshot()">點解截圖</button>
    </div>
    <hr>

function onSnapshot() {
    html2canvas(document.body, {
        useCORS: true,  // 跨域，好比圖片
        backgroundColor: null,
    }
    ).then(function (canvas) {
        document.body.appendChild(canvas);
    });
}
複製代碼

效果演示：

其也有很多坑，最多見的就是圖片丟失，方案是設置圖片crossorigin="anonymous"以及設置html2canvas的選項useCORS。

更多問題參見 html2canvas的踩坑之路 和 html2canvas issues

4.2 基於SVG的 dom-to-image 和 rasterizeHTML.js

原理是SVG的foreignObject標籤能夠包裹任意的html內容。

雖然提到這兩個庫，可是都有幾年沒維護和更新了，可是思路值得學習。

無頭瀏覽器

puppeteer, PhantomJS, , SlimerJS等等無頭瀏覽器，也具有截圖的能力，puppeteer屬於後起之秀， 很是看好。

puppeteer截圖代碼也是至關的簡單：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });

  await browser.close();
})();
複製代碼

其餘

6.1 先轉爲pdf,pdf再導出爲圖片

網頁打印能夠將其直接導出爲pdf， 固然也有不少程序能夠將網頁轉爲pdf。
好比 wkhtmltopdf。
好比 python的 pdfkit。

wkhtmltopdf也是能夠直接生成圖片的，很強大。

6.1 搜狗瀏覽器，360等國產瀏覽器

菜單有功能選項，另存爲圖片
複製代碼

寫在最後

寫做不易，你的一讚一評就是我前行的最大動力。

html2canvas的踩坑之路
JavaScript實現網頁截屏方法總結