网页中DOM元素转换成图片

Posted leonmangochen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页中DOM元素转换成图片相关的知识,希望对你有一定的参考价值。

  利用html2canvas.js将网页中dom元素转换成图片,html2canvas.js的链接是:http://html2canvas.hertzen.com/

  实现效果demo的代码如下:

  

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>网页转图片</title>
    <style>
    #img {
        position: fixed;
        top: 0px;
        left: 0px;
        opacity: 1;
        transform: scale(0.8);
        z-index: 99999999;
        transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1)
    }
    </style>
    <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>

<body>
    <div id="capture" style="padding: 10px; background: #f5da55">
        <h4 style="color: #000; ">Hello world!</h4>
    </div>
    <button id="btn">点击</button>
    <img id="img" />
    <script type="text/javascript">
    var element = document.querySelector(‘body‘);
    var image = document.querySelector(‘#img‘);

    $(‘#btn‘).on(‘click‘, function() {
        html2image(element, image);
    })

    function html2image(source, image) {
        html2canvas(source).then(canvas => {
            var imageData = canvas.toDataURL("image/png");
            image.src = imageData;
            // document.body.appendChild(canvas);
            sessionStorage.setItem(‘imageSrc‘, imageData);
        });
    }

    $.fn.longPress = function(fn) { //移动端长按屏幕方法
        var timeout = undefined;
        var $this = this;
        for (var i = 0; i < $this.length; i++) {
            $this[i].addEventListener(‘touchstart‘, function(event) {
                timeout = setTimeout(fn, 2000); //长按时间超过2000ms,则执行传入的方法
            }, false);
            $this[i].addEventListener(‘touchend‘, function(event) {
                clearTimeout(timeout); //长按时间少于2000ms,不会执行传入的方法
            }, false);
        }
    }
    $(‘body‘).longPress(function() {
        html2image(element, image);
    });
    </script>
</body>

</html>

  

以上是关于网页中DOM元素转换成图片的主要内容,如果未能解决你的问题,请参考以下文章

如何将此 JavaScript 代码片段翻译成 Parenscript?

jQuery对象转化成DOM对象

《关于实现一个函数把真实dom转换成虚拟dom原来是这么一回事》

第3章 DOM基本概念以及基本属性和方法

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段

网页怎么样转换成PDF格式不变图片不变