1. 程式人生 > >將頁面內容儲存為圖片顯示,長按儲存至本地(html2canvas)

將頁面內容儲存為圖片顯示,長按儲存至本地(html2canvas)

載入的html2canvas為官網上的新版本。

 

style樣式:

*{
margin: 0;padding: 0;
font-family: "微軟雅黑";
}
html,body{
width: 100%;
}
#capture,#imgDiv{
width: 100%;
}
.imgDiv_img{
width: 100%;
}

 

html:

<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">頁面內容</h4>
</div>
<div id="imgDiv">
<div class="imgDiv_title">生成的圖片</div>
<img class="imgDiv_img" src="" />
</div>

 

script程式碼:

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/html2canvas.js" type="text/javascript" charset="utf-8"></script>

$(function() {
html2canvas(document.querySelector("#capture")).then(function(canvas) {
var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 獲取生成的圖片的url
$(".imgDiv_img").attr("src",imgUri)
})
});