网页中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?
《关于实现一个函数把真实dom转换成虚拟dom原来是这么一回事》
jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段