html2canvas将HTML内容写入Canvas生成图片

最新推荐文章于 2024-07-03 10:28:21 发布

逃跑的羔羊

最新推荐文章于 2024-07-03 10:28:21 发布

阅读量1.4k

点赞数

分类专栏： html

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

引入html2canvas.js 下载地址：https://download.csdn.net/download/weixin_39442420/11038124
代码直接拷贝就可以用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
            }
            .test{
                width: 100px;
                height: 100px;
                text-align: center;
                line-height: 100px;
                background-color: #87CEEB;
                display: inline-block;
                vertical-align:top;
            }
            canvas{
                margin-right: 5px;
            }
            .down{
                float: right;
                 margin: 40px 10px;
            }
        </style>
    </head>
    <body>
    <a class="down" href="" download="downImg">下载</a>
     
    <div class="test">测试</div>
     
    <script src="html2canvas/html2canvas.js"></script>
<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";
	canvas2.style.display = "none";//隐藏新的canvas
    //可以按照自己的需求，对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>
    </body>
</html>

逃跑的羔羊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html2canvas将HTML内容写入Canvas生成图片

引入html2canvas.js 下载地址：https://download.csdn.net/download/weixin_39442420/11038124 代码直接拷贝就可以用<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <titl...
复制链接

扫一扫

专栏目录