分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

网页中DOM元素转换成图片

发布时间:2023-09-06 02:08责任编辑:胡小海关键词: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元素转换成图片

原文地址:https://www.cnblogs.com/leonmangochen/p/9420622.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved