526互联

HTML元素截图(html2canvas)

发布时间 2023-03-30 17:08:12作者: H辉

html2canvas 官网  ：http://html2canvas.hertzen.com/

开源地址：https://github.com/niklasvh/html2canvas

 

<body>

<div id="div">
    <span>内容</span>
    <div style="height:300px; border:solid 1px red; width:100px">内容</div>
</div>

</body>


<script src="html2canvas.min.js"></script>
<script>  
var id="div"; //元素的Id
html2canvas(document.querySelector("#"+id),{
                scale: 2, //缩小2倍
                width: $("#"+id).width()+20, //加20的原因是为了图像位置画布的中央
                height: $("#"+id).height()+20, //加20的原因是为了图像位置画布的中央
                backgroundColor: "#99ccff", //设置背景色
                x:-10, //设置x轴上开始位置
                y:-8  //设置y轴上开始位置
            }).then(canvas => {                     
               document.body.appendChild(canvas); //展示截图
                console.log("已生成图片");
               // var base64 = canvas.toDataURL(); // 将canvas转换成base64
                               
            });          
</script>

参考地址：https://blog.csdn.net/sodakii/article/details/127100737