javascript将html中的dom元素转图片

javascript将html中的dom元素转图片

百度网盘下载html2canvas.min.js:

全部文件-》js插件-》

javascript 复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>网页中的某个区域转图片</title>
  </head>
  <body style="margin:0px">
	  <div style="height: 0;overflow: hidden;">
		   <div id="capture" style="padding: 10px; background: #f5da55; width: 500px;">				
				<table border="1" cellspacing="0" cellpadding="0" width="100%">				
					<tr><td>Data</td><td>Data</td><td>Data</td></tr>
					<tr><td>Data</td><td>Data</td><td>Data</td></tr>
					<tr><td>Data</td><td>Data</td><td>Data</td></tr>
				</table>
		  </div>
	  </div>
   
	<img  id="test" alt="">
    <button type="button" name="button" onclick="convert()">开始生成</button>
    <br>
    <script type="text/javascript" src="html2canvas.min.js"></script>
    <script type="text/javascript">
		// window.οnlοad=convert();
      //开始转换
      function convert() {
        html2canvas(document.getElementById('capture')).then(canvas => {
          // document.body.appendChild(canvas)
		  document.getElementById('test').src=canvas.toDataURL();
        });
      }
    </script>
  </body>
</html>
相关推荐
拉不动的猪4 分钟前
# 移动端与PC端全屏的处理
前端·javascript·面试
excel22 分钟前
招幕技术人员
前端·javascript·后端
淋一遍下雨天42 分钟前
Spark Streaming核心编程总结(四)
java·开发语言·数据库
小白学大数据1 小时前
如何避免爬虫因Cookie过期导致登录失效
开发语言·爬虫·python·scrapy
烛阴1 小时前
Promise无法中断?教你三招优雅实现异步任务取消
前端·javascript
爱吃烤鸡翅的酸菜鱼2 小时前
【SpringMVC】概念引入与连接
java·开发语言·mysql
小白学大数据2 小时前
Python自动化解决滑块验证码的最佳实践
开发语言·python·自动化
碎梦归途2 小时前
23种设计模式-行为型模式之策略模式(Java版本)
java·开发语言·jvm·设计模式·策略模式·行为型模式
Albert Edison2 小时前
Python入门基础
开发语言·python
小余吃大鱼2 小时前
OpenStack私有云详细介绍
开发语言·php·openstack