登录  /  注册
博主信息
博文 11
粉丝 1
评论 0
访问量 17031
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
html生成图片
姑苏城外
原创
1245人浏览过
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>htmltopic</title>
   <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
    <style>
        * {
            margin: 0;
        }
 
 
        .test {
            width:10%;
            height: 100%;
            text-align: center;
            line-height: 100px;
            background-color: #87CEEB;
            display: inline-block;
            vertical-align: top;
        }
 
 
        canvas {
            margin-right: 5px;
        }
 
 
        .down {
            float: left;
            margin: 40px 10px;
        }
        .down2 {
            float: left;
            margin: 40px 30px;
        }
    </style>
</head>
<body>
 
 
    <div class="test">
    	<table border="1">
  <tr>
    <th>账号</th>
    <th>密码</th>
  </tr>
  <tr>
    <td>17703491441</td>
    <td>123456</td>
  </tr>
</table></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div><a class="down" href="" download="downImg">下载</a>
</div>
    <div><a class="down2" href="" download="downImg">下载2</a></div>
<script>
    //直接选择要截图的dom,就能截图,但是因为canvas的原因,生成的图片模糊
    //html2canvas(document.querySelector('div')).then(function(canvas) {
    //    document.body.appendChild(canvas);
    //});
    //创建一个新的canvas
    var canvas2 = document.createElement("canvas");
    let
    _canvas = document.querySelector('div');
    var w = parseInt(window.getComputedStyle(_canvas).width);
    var h = parseInt(window.getComputedStyle(_canvas).height);
    //将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
    canvas2.width = w * 2;
    canvas2.height = h * 2;
    canvas2.style.width = w + "px";
    canvas2.style.height = h + "px";
    //可以按照自己的需求,对context的参数修改,translate指的是偏移量
    //  var context = canvas.getContext("2d");
    //  context.translate(0,0);
    var context = canvas2.getContext("2d");
    context.scale(2, 2);
    html2canvas(document.querySelector('div'), { canvas: canvas2 }).then(function(canvas) {
        //document.body.appendChild(canvas);
        //canvas转换成url,然后利用a标签的download属性,直接下载,绕过上传服务器再下载
        document.querySelector(".down").setAttribute('href', canvas.toDataURL());
    });
</script>
 
 
<script language="javascript">
    //这是另一种写法
    $(function () {
        $(".down2").click(function () {
            html2canvas($(".test")).then(function (canvas) {
                var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
                window.location.href = imgUri; // 下载图片
            });
 
 
            //html2canvas($('.tongxingzheng_bg'), {
            //    onrendered: function (canvas) {
            //        var data = canvas.toDataURL("image/png");//生成的格式
            //        //data就是生成的base64码啦
            //        alert(data);
            //    }
            //});
        });
    });
</script>
</body>
</html>


本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学