網頁html生成圖片的常用方案

如果您有一個需求是將網頁生成一個快照的圖片，然後需要用到該圖片上傳或者發送給他人的這樣的需求，那麼你會怎麼做呢？聰明的你可能會想到canvas是否可以生成一個這樣的圖片呢？沒錯，今天就給大家推薦一個簡單又好用的工具html2canvas。

準備文件

• 進入該官方網站點擊此處，在官網首頁開始下載資源文件，html2canvas.js或者html2canvas.min.js皆可。
• 將該資源文件引入您需要使用該功能的頁面中。

開始使用

• 給您想轉換成圖片的盒子標籤上添加一個唯一id，這樣便於找到該DOM節點。
• 按照官方文檔相關參數設置並添加代碼在合適的地方來進行圖片轉換。

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

詳細使用

• 相關參數設置可參考該官方文檔，根據需要設置即可。

兼容性介紹

• Firefox 3.5+
• Google Chrome
• Opera 12+
• IE9+
• Edge
• Safari 6+

關於vue-cli中使用

• 最新版本應該可以直接通過yarn或者npm引入了，可參照官網首頁介紹

npm install --save html2canvas

或者

yarn add html2canvas

• 如果有相關問題，還可參考另一篇文章點此查看