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>
相关推荐
sunn。23 分钟前
自定义组件触发饿了么表单校验
javascript·vue.js·elementui
染指111033 分钟前
6.第二阶段x64游戏实战-分析人物状态
开发语言·汇编·windows·游戏·游戏逆向·x64dbg·x64游戏
烛阴43 分钟前
Express入门必学三件套:路由、中间件、模板引擎全解析
javascript·后端·express
哟哟耶耶1 小时前
React-01React创建第一个项目(npm install -g create-react-app)
前端·javascript·react.js
forestsea1 小时前
Java虚拟机面试题:内存管理(中)
java·开发语言
longlong int1 小时前
【每日算法】Day 17-1:位图(Bitmap)——十亿级数据去重与快速检索的终极方案(C++实现)
开发语言·c++·算法
欧宸雅1 小时前
Perl语言的文件系统
开发语言·后端·golang
try again!1 小时前
HTML快速上手
前端·css·html
写代码的小王吧1 小时前
【安全】Java幂等性校验解决重复点击(6种实现方式)
java·linux·开发语言·安全·web安全·网络安全·音视频
淘源码d2 小时前
如何运用C#.NET快速开发一套掌上医院系统?
开发语言·c#·.net·源码·掌上医院