• 技术文章 >web前端 >js教程

    js如何把html转换成图片格式

    coldplay.xixicoldplay.xixi2021-02-20 10:54:28原创101

    js把html转换成图片格式的方法:首先利用html2canvas把html转换成canvas;然后利用canvas对象方法【toDataURL()】把canvas转换成图片。

    本教程操作环境:windows7系统、javascript1.8.5版,DELL G3电脑,该方法适用于所有品牌电脑。

    js把html转换成图片格式的方法:

    1、首先利用html2canvas把html转换成canvas

    html2canvas($('#content'),{
        onrendered: function(canvas) {
            document.body.appendChild(canvas);
        }
    })

    2、利用canvas对象方法:toDataURL()把canvas转换成图片

    function convertCanvasToImage(canvas) {
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        return image;
    }

    得到的数据格式为:data:image/png;base64…

    完整代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="jquery.min.js"></script>
        <script src="html2canvas.js"></script>
    </head>
    <body>
        <div id="content" style="width:150px;height:150px;border:1px solid blue;">
            <span>Hello World!</span>
            <br>
            <span><h2>Are you hear me?</h2></span>
        </div>
        <button id="btnSave">save</button>
    <script>
    $(function(){
        $('#btnSave').click(function(event) {
            html2canvas($('#content'),{
                onrendered: function(canvas) {
                    document.body.appendChild(canvas);
                    convertCanvasToImage(canvas);
                }
            })
        });
        function convertCanvasToImage(canvas) {
            var image = new Image();
            image.src = canvas.toDataURL("image/png");
            document.body.appendChild(image);
            return image;
        }
    })
    </script>
    </body>
    </html>

    相关免费学习推荐:javascript视频教程

    以上就是js如何把html转换成图片格式的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    上一篇:深入了解nodejs中的process对象 下一篇:react组件拆分的重要性
    第15期线上培训班

    相关文章推荐

    • JavaScript介绍AJAX加载单张图片展示进度的方法• 一起看看ECMAScript和JavaScript的区别• 使用JavaScript实现休眠或等待• 介绍JavaScript作用域和闭包• 学习使用JavaScript实现UTF-8编解码

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网