导出 html页面内容为图片，

最新推荐文章于 2024-03-01 17:18:39 发布

紫薯馍馍

最新推荐文章于 2024-03-01 17:18:39 发布

阅读量1.6k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/u012972294/article/details/103887074

版权

HTML 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

导出 html页面内容为图片，唯一需要注意的就是导出div为图片需要有长度和高度。不然会导出其他格式的文件

页面代码如下：


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>htmltopic</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.0/core.js"></script>
    <script type="text/javascript" src="html2canvas.js"></script>
   
</head>
<body>
 
 
    <div class="test">
      导出内容。。。。。。。。。		
				
</div>
<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('.test');
    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('.test'), { 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>

需要下载一个 html2canvas.js

紫薯馍馍

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导出 html页面内容为图片，

导出 html页面内容为图片，唯一需要注意的就是导出div为图片需要有长度和高度。不然会导出其他格式的文件页面代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>htmltopic</title> <...
复制链接

扫一扫