html2canvas 一个强大的使用js开发的浏览器网页截图工具
生活随笔
收集整理的這篇文章主要介紹了
html2canvas 一个强大的使用js开发的浏览器网页截图工具
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
html2canvas是一個JavaScript類庫，它使用了html5和css3的一些新功能特性，實現了在客戶端對網頁進行截圖的功 能。html2canvas通過獲取頁面的DOM和元素的樣式信息，并將其渲染成canvas圖片，從而實現給頁面截圖的功能。
html2canvas 一個強大的使用js開發的瀏覽器網頁截圖工具https://github.com/niklasvh/html2canvas
star:22.3k
如何安裝
使用 npm or yarn
導入
import html2canvas from 'html2canvas'用法
html2canvas(document.body).then(function(canvas) {document.body.appendChild(canvas); });所以一個基本的代碼如下：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../js/html2cancas.js"></script></head><body></body><script>html2canvas(document.body).then(function (canvas) {document.body.appendChild(canvas)})</script> </html>實現原理：將需要截圖的頁面在canvas中進行重繪，這樣將頁面轉換成圖片的過程。
注意事項：
不支持iframe
不支持跨域圖片(可以先將線上圖片轉換成base64，然后用base64作為圖片路徑)
不支持flash
不支持transform、transition過渡、animation動畫(備注：transform初始布局是可以的，但是不能參與動畫類的操作)
總結
以上是生活随笔為你收集整理的html2canvas 一个强大的使用js开发的浏览器网页截图工具的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： About Gtalk
- 下一篇： 统一暗色浏览器扩展--Dark Read