最近發(fā)現(xiàn)項(xiàng)目中需要點(diǎn)擊按鈕保存頁(yè)面為圖片，就是網(wǎng)頁(yè)截屏，通過用戶自主填寫或是答案生成圖片然后發(fā)朋友圈或是其他的圈。
而html2canvas?能幫助前端實(shí)現(xiàn)這一功能：
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<p>我的邀請(qǐng)碼</p>
<p>我的邀請(qǐng)碼</p>
<p>我的邀請(qǐng)碼</p>
<p class="erweima"><a class="down" href="" download="downImg">保存二維碼</a></p>
<script>
? //直接選擇要截圖的dom，就能截圖，但是因?yàn)閏anvas的原因，生成的圖片模糊
? //html2canvas(document.querySelector('div')).then(function(canvas) {
? // document.body.appendChild(canvas);
? //});
? //創(chuàng)建一個(gè)新的canvas
? var canvas2 = document.createElement("canvas");
? let _canvas = document.querySelector('html');
? //此處可換body，或div等
? var w = parseInt(window.getComputedStyle(_canvas).width);
? var h = parseInt(window.getComputedStyle(_canvas).height);
? //將canvas畫布放大若干倍，然后盛放在較小的容器內(nèi)，就顯得不模糊了
? canvas2.width = w;
? canvas2.height = h;
? canvas2.style.width = w + "px";
? canvas2.style.height = h + "px";
? //可以按照自己的需求，對(duì)context的參數(shù)修改,translate指的是偏移量
? // var context = canvas.getContext("2d");
? // context.translate(0,0);
? var context = canvas2.getContext("2d");
? // context.scale(2, 2);
? html2canvas(document.querySelector('body'), {
? canvas: canvas2,
? ? ? taintTest:true,
? ? ? useCORS:true,
? ? ? allowTaint:true
? }).then(function(canvas) {
? //此處html可換body，或div等
? //document.body.appendChild(canvas);
? //canvas轉(zhuǎn)換成url，然后利用a標(biāo)簽的download屬性，直接下載，繞過上傳服務(wù)器再下載
? document.querySelector(".down").setAttribute('href', canvas.toDataURL());
? });
? </script>
