前端页面使用html2canvas生成图片

首先引入两个js文件:

javascript 复制代码
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>

HTML代码:

html 复制代码
<div id="app_name" >生成图片</div>
	
<hr />
	
<div id="div1">
    <img src="/image/ercode.jpg" style="width: 100%;" />
    <table>
        <tr>
	        <td>
	        <p>123</p>				            
            <p>123</p>
		    <p>123</p>
	    </td>
	    <td align="center">
		<img src="img/index.jpg" height="80" />
	    </td>
	</tr>
	<tr>
	    <td colspan="2">
	        <span>● 生成图片 </span><br />
	        <span>1.生成图片;</span><br />
	        <span>2.生成图片;</span><br />
	        <span>3.生成图片;</span><br />
	        <span>4.生成图片;</span><br />
	    </td>
	</tr>
	<tr align="center">
	    <td colspan="2" class="weixin-tip">
		此处是动态生成的二维码				
	    </td>
	</tr>
	<tr align="center">
	    <td colspan="2" style="font-size: 14px;">啦啦啦</td>
	</tr>
	<tr align="right">
	    <td></td>
	    <td>
		<img src="img/index.jpg" height="30" style="padding-right: 20px;" />
	    </td>
	</tr>
	<tr align="right">
	    <td></td>
	    <td>
		<span>生成图片</span>
	    </td>
	</tr>
    </table>
</div>
 
<!-- 此处是需要生成图片的地方 -->		
<div id="imgDiv" style="position: absolute;">
    <img class="imgDiv_img" src="" style="width: 100%;" />
</div>

JS代码:

javascript 复制代码
<script type="text/javascript">
    $(function() {
        html2canvas(document.querySelector("#div1")).then(function(canvas) {
	    var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
	    $(".imgDiv_img").attr("src",imgUri)
	})
    });
</script>
相关推荐
yngsqq5 分钟前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#
mrsk8 分钟前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan10 分钟前
我自建服务器部署了 Next.js 全栈项目
前端
A了LONE13 分钟前
h5的底部导航栏模板
java·前端·javascript
专注VB编程开发20年15 分钟前
各版本操作系统对.NET支持情况(250707更新)
开发语言·前端·ide·vscode·.net
Zsnoin能26 分钟前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房26 分钟前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端
轻语呢喃27 分钟前
JavaScript :事件循环机制的深度解析
javascript·后端
摆烂为不摆烂31 分钟前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
qiyue7731 分钟前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor