從多個方面詳解html2canvas.js下載

一、html2canvas截圖下載

html2canvas是一個能夠實現將HTML界面轉化為Canvas圖像並導出的JavaScript庫，使得前端開發人員能夠很方便地把所見即所得的界面進行保存或導出、出圖。我們可以通過以下代碼引入html2canvas：

<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.0.0/html2canvas.min.js"></script>

在使用html2canvas進行截圖之前，我們需要首先規劃好需要截圖的界面元素及導出方式。以下代碼展示如何對頁面進行截圖並下載成PNG或JPEG格式：

html2canvas(document.body).then(function(canvas) {
    //將html2canvas生成的Canvas對象轉化為圖片url，傳入瀏覽器默認下載函數即可實現下載圖片的功能
    download(canvas.toDataURL(), 'canvas.png'); //下載為PNG格式
    // download(canvas.toDataURL('image/jpeg'), 'canvas.jpg'); //下載為JPEG格式
});

//瀏覽器默認下載函數
function download(url, name) {
    var link = document.createElement('a');
    link.download = name;
    link.href = url;
    link.click();
}

代碼執行後，我們即可獲得一張下載下來的截圖。

二、html2canvas官網

html2canvas的官方網站為https://html2canvas.hertzen.com/。通過訪問該網站，我們可以找到html2canvas的相關文檔和資源。以下是幾個值得一提的資源：

1、html2canvas GitHub主頁：https://github.com/niklasvh/html2canvas

html2canvas的GitHub代碼倉庫，包含了html2canvas的源碼及其相關資源。

2、html2canvas在線示例：https://html2canvas.hertzen.com/examples

html2canvas提供了多個在線示例，可以通過這些示例了解html2canvas的具體應用。

3、html2canvas文檔：https://html2canvas.hertzen.com/documentation

html2canvas的官方文檔，包含了html2canvas的安裝、基本使用、高級使用以及API等相關內容。

三、html2canvas源碼解析

1、核心代碼解析

以下為html2canvas的主要代碼邏輯：

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas);
});

function html2canvas(node) {
  //初始化畫布並返回一個Promise對象
  return new Promise(resolve => {
    //創建一個canvas元素並賦予初始屬性
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
  
    //將傳入的節點進行轉化為Canvas
    renderNode(node, ctx).then(() => {
      resolve(canvas);
    });
  });
}

function renderNode(node, ctx) {
  //創建包含當前節點的Promise對象
  return new Promise(resolve => {
    //使用window.getComputedStyle()獲取節點在渲染後的實際樣式
    const style = window.getComputedStyle(node);
    //獲取節點的實際寬高
    const width = parseInt(style.getPropertyValue("width"));
    const height = parseInt(style.getPropertyValue("height"));
  
    //將當前節點繪製到Canvas上
    ctx.drawImage(node, 0, 0, width, height);
  
    //創建一個嵌套的Promise對象，來處理當前節點的子元素
    Promise.all(
      [...node.childNodes].map(node => renderNode(node, ctx))
    ).then(() => {
      resolve();
    });
  });
}

html2canvas的核心邏輯在於將需要截圖的節點轉化為Canvas對象，經過多次Promise嵌套處理，最終返回一個包含有Canvas對象的Promise對象。通過resolve()可以實現非同步代碼的同步等待。

2、核心演算法解析

html2canvas的核心演算法在於Canvas的繪製過程，具體包括以下幾個步驟：

1、計算繪製的實際寬高

首先通過window.getComputedStyle()獲取節點在渲染後實際的樣式，然後獲取節點的實際寬高，為後續的繪製做準備。

2、繪製節點的背景及邊框

通過繪製一個填充為節點背景色的矩形，實現對節點背景的繪製；

通過繪製多個邊框，實現對節點邊框的繪製。

3、繪製節點的子元素

通過嵌套的Promise對象逐個處理子元素的繪製，最終實現對節點及其所有子元素的繪製。

3、html2canvas常見問題

1、跨域問題

默認情況下，html2canvas會受到同源策略的限制，導致無法截圖跨域的頁面。我們可以通過配置proxy屬性實現對跨域網頁的截圖。例如：

html2canvas(document.body, { 
  proxy: "https://html2canvas-proxy.xxxxx.com/proxy.php?url="
}).then(canvas => {
  document.body.appendChild(canvas);
});

proxy屬性需要對應一個介面來轉發圖片。具體實現方式可以參考html2canvas-proxy項目的源碼。

2、低版本瀏覽器兼容問題

html2canvas可能存在與IE瀏覽器及低版本瀏覽器之間的不兼容問題。為此，我們可以通過引入html2canvas的一些插件以及設置一些CSS屬性來實現瀏覽器兼容，方法如下：

1）引入一些兼容HTML5的polyfills，比如html5shiv.min.js、respond.min.js。

<!--[if lt IE 9]>
  <script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

2）設置html和body元素的高度及寬度為100%，禁止滾動

html,body{
  width:100%;
  height:100%;
  overflow:hidden;
}

3）增加SVG規則

svg {
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 1em;
  height: 1em;
}

4）設置一些樣式，如opacity屬性等

四、HTML頁面截圖實戰應用

html2canvas的使用並不僅止於獲取某個節點或整個頁面的靜態截圖，其還可以在實際應用場景中發揮其大作用。以下是幾個應用場景：

1、生成二維碼

我們可以通過html2canvas的截圖功能對生成的二維碼進行截圖保存，代碼如下：

html2canvas(document.querySelector("#qr-code")).then(canvas => {
    document.body.appendChild(canvas);
    //將html2canvas生成的Canvas對象轉化為圖片url，傳入瀏覽器默認下載函數即可實現下載圖片的功能
    download(canvas.toDataURL(), 'qr-code.png'); //下載為PNG格式
});

2、圖片合成

通過html2canvas生成多張圖片並進行合成，實現多幀動態效果的生成，代碼如下：

const canvas_1 = document.createElement("canvas");
const canvas_2 = document.createElement("canvas");

html2canvas(document.querySelector(".block-1")).then(canvas => {
    canvas_1.width = canvas.width;
    canvas_1.height = canvas.height;
    
    const ctx = canvas_1.getContext("2d");
    //將第一張圖片繪製到畫布上
    ctx.drawImage(canvas, 0, 0);
}).then(() => {
    html2canvas(document.querySelector(".block-2")).then(canvas => {
        canvas_2.width = canvas.width;
        canvas_2.height = canvas.height;
    
        const ctx = canvas_2.getContext("2d");
        //將第二張圖片繪製到畫布上
        ctx.drawImage(canvas, 0, 0);
    });
}).then(() => {
    //將兩張畫布合併成一張
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    
    canvas.width = canvas_1.width + canvas_2.width;
    canvas.height = canvas_1.height;

    ctx.drawImage(canvas_1, 0, 0);
    ctx.drawImage(canvas_2, canvas_1.width, 0);

    //將html2canvas生成的Canvas對象轉化為圖片url，傳入瀏覽器默認下載函數即可實現下載圖片的功能
    download(canvas.toDataURL(), 'merged.png'); //下載為PNG格式
});

//瀏覽器默認下載函數
function download(url, name) {
    var link = document.createElement('a');
    link.download = name;
    link.href = url;
    link.click();
}

通過以上實現方法，我們可以將多張靜態圖片合成成一張帶有動態效果的圖片。