如何把網頁上的內容用javascript來實現截圖？今天分享的html2canvas就可以。

介紹

在微信項目中經常會遇到動態生成海報的需求，Web前端合成圖片往往會使用canvas。canvas雖然強大，但用來合成海報非常繁瑣，一不小心就幾百行代碼了。而html2canvas.js是一款輕松地將HTML+CSS寫成的布局直接轉換成canvas，生成可保存分享的圖片。

html2canvas.js官網截圖

特點

• 兼容現代瀏覽器，手機項目可放心大膽使用；

• 官網文檔清晰簡單，用法簡單支持npm/yarn和cdn引入，有充足的代碼例子；

• 支持部分常用的CSS屬性，配合圖片使用幾乎能滿足所有動態生成海報的需求。

使用體驗

這是一個把HTML的DOM結構根據所支持的CSS樣式生成canvas的js開源庫，CSS的寫法千變萬化，不同的布局有很多不同的寫法，因此html2canvas是不能100%還原網頁的樣式，因此不用用于像電腦屏幕截圖這樣的需求中。

官網關于支持css的說明

使用的時候要注意查看所支持的CSS屬性，盡量使用這些屬性來寫布局，不支持的效果可以嘗試用圖片來實現。只要產品經理腦子在線，目測幾乎沒有什么海報需求是實現不了的。

官網是英文的，寫得很專業，谷歌翻譯閱讀無壓力。

免費使用說明

html2canvas 由開發者 Niklas von Hertzen 創建，基于MIT許可開源，可以免費使用在任何項目。

↓↓點【閱讀原文】獲取html2canvas官網地址。

? ?

總結

以上是生活随笔為你收集整理的h5页面生成图片分享到微信js_html2canvas 动态生成微信分享海报的优质js库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。