html2canvas将html转化成图片

程序员文章站 2022-07-14 19:20:34

...

<!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效果图
html2canvas将html转化成图片

html2canvas将html转化成图片

如何在VS2008中将背景图片拉伸至整张页面而不是平铺_html/css_WEB-ITnose

用java 将Excel转为图片、html、XPS、XML、CSV

网页中多个图标在一张图片上，使用css将各图标显示_html/css_WEB-ITnose

html2canvas把div保存图片高清图（图文教程）

将HTML5 Canvas的内容保存为图片借助toDataURL实现

vue 使用html2canvas将DOM转化为图片的方法

html5中如何将图片的绝对路径转换成文件对象

html5将图片转换成base64的实例代码

将HTML5 Canvas的内容保存为图片借助toDataURL实现

vue 使用html2canvas将DOM转化为图片的方法