將 html 網頁儲存為圖片
阿新 • • 發佈：2018-11-26
GitHub：https://github.com/niklasvh/html2canvas
官網：https://html2canvas.hertzen.com
html2canva.js：https://html2canvas.hertzen.com/dist/html2canvas.min.js
或者 https://www.bootcdn.cn/html2canvas/
用法：
html: <div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> js: html2canvas(document.querySelector("#capture")).then(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"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> html 轉為圖片</title> </head> <style> .container{ display: flex; align-items: center; flex-wrap: wrap; } h3,p{ width: 100%; text-align: center; } ol{ width: 100%; padding: 0; } li{ text-align: center; list-style: none; } img{ width: 200px; height: 150px; margin: 0 auto; } </style> <body> <div class="container"> <h3>將此網頁轉換為一張圖片</h3> <p> 前往 <a href="https://html2canvas.hertzen.com/dist/html2canvas.min.js" target="_blank"> 此處 </a> 下載html2canvas.js </p> <img src="http://img4.imgtn.bdimg.com/it/u=2153706307,1786056933&fm=26&gp=0.jpg" alt=""> <ol> <li>內容一</li> <li>內容二</li> <li>內容三</li> <li>內容四</li> <li>內容五</li> </ol> </div> <p id="save">點此儲存圖片</p> <p id="look">點此預覽圖片</p> <hr> <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> <script> save.onclick = function(){ html2canvas(document.querySelector(".container"),{ useCORS:true, logging:true, }).then(canvas => { var url = canvas.toDataURL('image/png') var a = document.createElement('a') var event = new MouseEvent('click') a.download = name || '下載圖片名稱' a.href = url a.dispatchEvent(event) }); } look.onclick = function(){ html2canvas(document.querySelector(".container"),{ useCORS:true, logging:true, }).then(canvas => { document.body.appendChild(canvas); }); } </script> </body> </html>
js 儲存圖片到本地：https://www.cnblogs.com/zhangkaiqiang/p/8183926.html