首先引入两个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>