前端页面使用html2canvas生成图片

zhang-zan2024-01-26 15:06

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