前端页面使用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>
相关推荐
hj5914_前端新手17 分钟前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法21 分钟前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku32 分钟前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode37 分钟前
iOS 苹果内购 Storekit 2
前端
LuckySusu38 分钟前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu38 分钟前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu42 分钟前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu42 分钟前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu1 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在1 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net