html2canvas使用简单实例，亲测可用
妙网小编 发表于2017年3月25日 15:30
直接上代码，经测试，完美正常使用，图片清晰
<!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">
测试文字
妙网科技
</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>
随机文章推荐 收藏本文
共有7849阅 / 0评我要评论
- 还没有评论呢，快抢沙发~
发表你的评论吧返回顶部
!评论内容需包含中文