妙网科技 妙网科技 首页 妙网科技 网站开发 妙网科技 html2canvas使用简单实例，亲测可用

html2canvas使用简单实例，亲测可用

所属栏目： 网站开发 | 更新时间：2017-3-25 | 阅读：7854 次

直接上代码，经测试，完美正常使用，图片清晰

<!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>

标签: 网站制作 网站建设 网站设计 JQ

« JQ获取DIV元素背景图URL | CSS3无限旋转动画代码»