js把html頁面列印成png圖片（實測，可用）
阿新 • • 發佈：2019-01-08
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ceshi</title> <style> .test h3{ width: 100px; height: 100px; text-align: center; background: green; line-height: 100px; } </style> </head> <body> <div class="test"> <h3>1233</h3> </div> <div class="copy"> <button onclick="copy()">截圖</button> <a class="down" href="" download="downImg">下載</a> </div> <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script> <script> var pic; var canvas2 = document.createElement("canvas"); let _canvas = document.querySelector('.test'); var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas).height); //將canvas畫布放大若干倍，然後盛放在較小的容器內，就顯得不模糊了 canvas2.width = w * 2; canvas2.height = h * 2; canvas2.style.width = w + "px"; canvas2.style.height = h + "px"; //可以按照自己的需求，對context的引數修改,translate指的是偏移量 var context = canvas2.getContext("2d"); context.scale(2,2); html2canvas(document.querySelector('.test'),{canvas:canvas2}).then(function(canvas) { pic=canvas; //canvas轉換成url，然後利用a標籤的download屬性，直接下載，繞過上傳伺服器再下載 document.querySelector(".down").setAttribute('href',canvas.toDataURL()); }); //點選的時候把圖片複製到下面那個div下 function copy(){ document.querySelector(".copy").appendChild(pic); } </script> </html>
