html2canvas使用簡單實例,親測可用
所屬欄目: 網(wǎng)站開發(fā) | 更新時間:2017-3-25 | 閱讀:8459 次
直接上代碼,經(jīng)測試,完美正常使用,圖片清晰
<!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">
測試文字
妙網(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>