微信瀏覽器將html儲存為圖片並儲存
阿新 • • 發佈：2019-01-29
需求:將含有二維碼的html轉化成圖片並儲存
思路:
1.將html頁面轉化成圖片需要使用H5中canvas（畫布）功能，需要引入js庫:
html2canvas.js
canvas2image.js
jquery.min.js（必須要）
qrcode.min.js （用於二維碼的生成）
2.通過qrcode.min.js 生成其相應的二維碼，並將其通過畫布繪製成圖片，並將其存入到二維碼位置，並將畫布繪製的圖片進行隱藏;
3.將html頁面進行canvas繪製成圖片(會顯示出三個相同的頁面，1個是html頁面,1個是canvas繪製的容器，1個是生成的圖片)；
思路:
第一步:將繪製容器canvas進行style:border:0;
第二步:將生成圖片存放在html頁面上，並將其設定成透明（style="top:0;left:0;width:100%;opacity:0;"）
4.使用jquery寫入函式自載入執行，長按儲存圖片
原始碼:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="__INDEX__/css/mui.min.css" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="__INDEX__/css/app.css" /> <script src="__INDEX__/js/html2canvas.js"></script> <script src="__INDEX__/js/canvas2image.js"></script> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="__INDEX__/js/qrcode.min.js"></script> <style> *{margin: 0;padding: 0;} body{background-color: #f5f8fd;} .my-info{ display: flex; /*justify-content: space-between;*/ align-items: center; padding: 0 1rem; width: 100%; height: 3rem; background-color: #fff; /* position: fixed;*/ top: 0; box-sizing: border-box; color: #5c5c5c; } .my-info .card-title{ display: inline-block; width: 100%; text-align: center; margin-left: -24px; } .card-head{ display: flex; justify-content: space-between; width: 100%; height: 2rem; padding: 0 1rem; box-sizing: border-box; font-size: 1rem; } .card-head span:first-child{ font-size: 1.2rem; font-weight: bold; } .card-item{ display: flex; background-color: #fff; width: 90%; height: 7rem; padding: 1rem; border-radius: .5rem; margin: 0 auto; } .card-item .ci-left{ display: flex; flex-direction: column; justify-content: center; align-items: center; /*padding: 1rem;*/ } .card-item .ci-left span{ font-size: .8rem; color: #05c0ac; } .card-item .ci-left .card-money{ font-size: 2rem; line-height: 2rem; } .card-item .ci-right{ display: flex; flex-direction: column; justify-content: center; /*align-items: center;*/ padding: 1rem 0 1rem 1rem; } .card-item .ci-right span:first-child{ font-size: 1rem; line-height: 1.6rem; } .card-item .ci-right span.over-date{ font-size: 1.2rem; color: #f97a30; } .img{ position:absolute; width:22%; z-index:10; } #share-img{ } .btn{ position:absolute; width:12%; z-index:14; } #pics{ position: absolute; top: 0; left: 0; opacity: 2; } canvas{ border:0; display:none; } </style> </head> <body id="imgs"> <!--頭部--> <header class="my-info"> <div class="head-left" onClick="javascript :history.back(-1);"> <span class="mui-icon mui-icon-back"></span> </div> <span class="card-title">分享中心</span> </header> <div class="content" style="width:100%;position:relative" id="tupic"> <!-- <a id="share"></a>--> <img id="share-img" src="__INDEX__/images/test.jpg" alt="" style="width:100%;"/> <!--<img src="http://api.k780.com:88/?app=qr.get&data=http://xx.com?shareuid=<?=session('shareuid')?>" width="" style="display:none" class="img" id="qrcode"> --> <div id="qrcode" class="img"></div> <img id="pics" style="width:100%"> <input type="image" src="__INDEX__/images/btn.png" id="btn" class="btn" > </div> <script src="__INDEX__/js/mui.min.js"></script> <script type="text/javascript"> var shareuid = "{:session('uid')}"; mui.init(); $(function(){ setTimeout(function(){ var ewmHeight = $('#share-img').height(); //alert(typeof ewmHeight); var imgH = Math.floor(ewmHeight/7); //alert(ewmHeight) //var img = $(''); $('.img').css({ left:'8%', bottom: imgH+'px', display:'block' }); },300) }); </script> <script> $(function(){ setTimeout(function(){ var ewmHeights = $('#share-img').height(); // alert(ewmHeights); var imgHs = Math.floor(ewmHeights/30); //alert(ewmHeight) //var img = $(''); $('.btn').css({ left:'6%', bottom: imgHs+'px', display:'block', width:'87%' }); },300) }); </script> <script> new QRCode(document.getElementById('qrcode'), ''); // 設定引數方式 var qrcode = new QRCode('qrcode', { text: 'http://xx.com?shareuid=<?=session('uid')?>&from=singlemessage', width: 85, height: 85, colorDark : '#000000', colorLight : '#ffffff', correctLevel : QRCode.CorrectLevel.H }); </script> <script> // $(document).ready(function () { // document.querySelector('#imgs').onclick = function(){ //html2canvas(document.querySelector("#tupic")).then(function (canvas) { // document.body.appendChild(canvas); //獲取擷取圖片路徑 //var base64Url = canvas.toDataURL('image/png'); //存入頁面指定位置 //document.getElementById("pics").src = base64Url; // var triggerDownload = $("#share").attr("href", base64Url).attr("download", "share.png"); //triggerDownload[0].click(); // }); // } // }); setTimeout(function(){ html2canvas(document.querySelector("#tupic")).then(function (canvas) { document.body.appendChild(canvas); var base64Url = canvas.toDataURL('image/png'); document.getElementById("pics").src = base64Url; }); },1000); </script> <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script src="__INDEX__/js/share.js"></script> </body> </html>