html2canvas将html转化成图片

最新推荐文章于 2024-06-16 15:00:01 发布

华尔街之猫

最新推荐文章于 2024-06-16 15:00:01 发布

阅读量1k

点赞数

分类专栏： html/css javascript

本文链接：https://blog.csdn.net/qq_24935119/article/details/104658329

版权

html/css 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

javascript

8 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html2canvas</title>
    <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

    <style>
     .box{
         padding: 10px;
         background: grey;
         width: 200px;
     }
     </style>
</head>
<body>
<h1>html内容</h1>
<div id="htmlcanvas" class="box" >
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <strong>strong</strong>
</div>
<h1>canvas内容</h1>
<div id="canvas"></div>

<h1>image内容</h1>
<img id="image" src=""/>

<script>
    html2canvas(document.querySelector("#htmlcanvas")).then(canvas => {

        document.getElementById("canvas").appendChild(canvas);

        // 转成图片
        canvasToImage(canvas);
    });

    // Converts canvas to an image
    function canvasToImage(canvas) {
        document.getElementById("image").setAttribute('src',canvas.toDataURL("image/png"))
    }
</script>
</body>
</html>

x效果图
在这里插入图片描述

华尔街之猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html2canvas将html转化成图片

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>html2canvas</title> <script src="http://html2canvas.hertzen.com/dist/html2canva...
复制链接

扫一扫

专栏目录