js将html转为图片（html2canvas截图）

最新推荐文章于 2024-07-08 09:55:40 发布

SJAping

最新推荐文章于 2024-07-08 09:55:40 发布

阅读量880

点赞数 2

分类专栏： html转图片文章标签： html canvas javascript js

本文链接：https://blog.csdn.net/qq_36413913/article/details/104783658

版权

html转图片专栏收录该内容

0 篇文章 0 订阅

订阅专栏

js将html转为图片（html2canvas截图）

借用html2canvas.js将html文本转为图片并展示在页面。
引入js。
< script src=“https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js” >< /script>
也可以下载js直接引入自己的项目。
调用html2canvas
html2canvas($("#content")).then(function (canvas) {
var imgUri = canvas.toDataURL(“image/png”); // 获取生成的图片的url
$("#father").append("<img src=""+imgUri+"">");
}）；
得到的是图片Base64，可以直接存放到img标签src中，直接展示

内联代码片。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery1.7.2.js" ></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <script type="text/javascript">


        function onclick1() {
            html2canvas($("#content")).then(function (canvas) {
                var imgUri = canvas.toDataURL("image/png"); // 获取生成的图片的url
                $("#father").append("<img src=\""+imgUri+"\">");

                // $('#father').css("background-image","url('"+imgUri+"')") ;

            });
        }
    </script>
</head>
<style>
    table{
        border-collapse:collapse;
        text-align: center;
        margin: auto;
        width: 800px;
        height: 800px;
    }
</style>
<body>
<div style="text-align: center" id="content">
    <p>
        要截图的内容
    </p>
    <table  border="1px" >
        <thead>
        <tr style="height: 50px">
            <th>网站</th>
            <th>资源</th>
            <th>url</th>
            <th>排名</th>
        </tr>
        <tbody>
        <tr >
            <td>淘宝网</td>
            <td>大</td>
            <td>www.taobao.com</td>
            <td>25</td>
        </tr>
        <tr >
            <td rowspan="2">京东</td>
            <td>大</td>
            <td>www.jingdong.com</td>
            <td>25</td>

        </tr>
        <tr >
            <td>大</td>
            <td>www.jingdong.com</td>
            <td>25</td>

        </tr>
        <tr >
            <td colspan="4" style="text-align: center;">testtesttesttesttesttesttesttest</td>
        </tr>
        </tbody>
        </thead>
    </table>
</div>
<div  style="text-align: center">

    <button id="btn" onclick="onclick1()"  >点击获取</button>
    <br>
    <div id="father">

    </div>
</div>

</body>
</html>

SJAping

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js将html转为图片（html2canvas截图）

js将html转为图片（html2canvas截图）借用html2canvas.js将html文本转为图片并展示在页面。引入js。< script src=“https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js” >< /script>也可以下载js直接引入自己的项目。调用html2canva...
复制链接

扫一扫