當(dāng)前位置: 首頁 > 網(wǎng)站開發(fā) > 正文
html2canvas使用簡(jiǎn)單實(shí)例，親測(cè)可用
妙網(wǎng)小編 發(fā)表于2017年3月25日 15:30
直接上代碼，經(jīng)測(cè)試，完美正常使用，圖片清晰
<!DOCTYPE html>
<html><head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#aa{ width: 100px;height: 100px;position: absolute; background: #E93437;}
#bb{ width: 100px;height: 100px;position: absolute;right: 0; background: #E93437;}
#cc{ width: 100px;height: 100px;position: absolute;top: 300px;}
</style>
</head>
<body>
<div id="aa">
測(cè)試文字
妙網(wǎng)科技
</div>
<div id="bb"></div>
<div id="cc"></div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script type="text/javascript">
html2canvas(document.getElementById("aa"), {
onrendered: function(canvas) {
var image = canvas.toDataURL("image/png");//使用PNG格式圖片很清晰
$("#bb").append(canvas);
$("#cc").html("<img src="+image+" />");
}
});
</script>
</body>
</html>
隨機(jī)文章推薦 收藏本文
共有8503閱 / 0評(píng)我要評(píng)論
- 還沒有評(píng)論呢，快搶沙發(fā)~
發(fā)表你的評(píng)論吧返回頂部
!評(píng)論內(nèi)容需包含中文