html頁面生成圖片並下載
阿新 • • 發佈：2018-12-05
<body> <div id="shareBody"> <div id="code"></div> <p>一些文字..</p> <p>菜鳥教程，學的不僅是技術，更是夢想！！！</p> </div> </body> <script type="text/javascript" src="/hello/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="/hello/js/html2canvas.js"></script> <script src="/hello/js/qrcode.js"></script> <script> var qrcode = new QRCode('code', { text: 'your content', width: 100, height: 100, colorDark : '#000000', colorLight : '#ffffff', correctLevel : QRCode.CorrectLevel.H }); </script> <script> var w = $("#shareBody").width(); var h = $("#shareBody").height(); //要將 canvas 的寬高設定成容器寬高的 2 倍 var canvas = document.createElement("canvas"); canvas.width = w * 2; canvas.height = h * 2; canvas.style.width = w + "px"; canvas.style.height = h + "px"; var context = canvas.getContext("2d"); //然後將畫布縮放，將影象放大兩倍畫到畫布上 context.scale(2, 2); html2canvas(document.querySelector("#shareBody"), { canvas: canvas, onrendered: function (canvas) { var url = canvas.toDataURL("image/png"); //base64資料 alert(url); window.location.href=url.replace("image/png", "image/octet-stream"); } }); </script>