Js實現將html頁面或div生成圖片

參考：https://blog.csdn.net/huwei2003/article/details/79761580javascript

今天要分享的是用html2canvas根據本身的需求生成截圖，而且修復html2canvas截圖模糊，以及繞過服務器圖片保存至本地。　　

只須要短短的幾行代碼，就能根據所需的dom截圖，是否是很方便，可是生成的圖片模糊
//直接選擇要截圖的dom，就能截圖，可是由於canvas的緣由，生成的圖片模糊
html2canvas(document.querySelector('div')).then(function(canvas) {
document.body.appendChild(canvas);
})
　　
常見的解決方案是，生成一個多倍的畫布，而後將其放在較小的容器內，這樣就解決了截屏模糊的尷尬。

還有一個問題是怎麼將圖片繞過服務器保存至本地，canvas有個toDataURL的方法，而後a標籤有個download屬性，感受簡直天造之和。固然微信中屏蔽下載，能夠藉助微信的webview中的一個內置規則，只要是a標籤(不含href屬性)裏面嵌套Img的，能夠正常呼出保存至手機和分享給朋友的菜單欄。

如下是簡單的demo, html2canvas.min.js 下載地址: http://www.bootcdn.cn/html2canvas/html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>htmltopic</title>
    <script type="text/javascript" src="/h5/js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/html2canvas.min.js"></script>
    <style>
        * { margin: 0; } .test { width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: #87CEEB;
            display: inline-block; vertical-align: top; } canvas { margin-right: 5px; } .down { float: left; margin: 40px 10px; } .down2 { float: left; margin: 40px 30px; } </style>
</head>
<body>
 
 
    <div class="test">測試</div>
<div><a class="down" href="" download="downImg">下載</a>
</div>
    <div><a class="down2" href="" download="downImg">下載2</a></div>
<script>
    //直接選擇要截圖的dom，就能截圖，可是由於canvas的緣由，生成的圖片模糊 //html2canvas(document.querySelector('div')).then(function(canvas) { // document.body.appendChild(canvas); //}); //建立一個新的canvas
    var canvas2 = document.createElement("canvas"); let _canvas = document.querySelector('div'); 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 = canvas.getContext("2d"); // context.translate(0,0);
    var context = canvas2.getContext("2d"); context.scale(2, 2); html2canvas(document.querySelector('div'), { canvas: canvas2 }).then(function(canvas) { //document.body.appendChild(canvas); //canvas轉換成url，而後利用a標籤的download屬性，直接下載，繞過上傳服務器再下載
        document.querySelector(".down").setAttribute('href', canvas.toDataURL()); }); </script>
 
 
<script language="javascript">
    //這是另外一種寫法
    $(function () { $(".down2").click(function () { html2canvas($(".test")).then(function (canvas) { var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 獲取生成的圖片的url
                window.location.href = imgUri; // 下載圖片
 }); //html2canvas($('.tongxingzheng_bg'), { // onrendered: function (canvas) { // var data = canvas.toDataURL("image/png");//生成的格式 // //data就是生成的base64碼啦 // alert(data); // } //});
 }); }); </script>
</body>
</html>