时间:2021-07-01 10:21:17 帮助过:25人阅读
以下是需要生成图片的网页
html代码如下:
<p class="tongxingzheng_bg"> <p class="tongxingcard"> <p class="titlebar">访客通行证</p> <p class="tx_content"> <p class="wl_logo"><img src="$!webPath/resources/images/logo.png" ></p> <p class="xinxi"> <p class="name">$!{data.name}</p> <p class="tongxingma"> <span class="text">通行码:</span> <span class="code">$!{data.number}</span> </p> </p> </p> <p class="itemLine"> <span class="mudi">目的地:</span> <span class="address">$!{data.property}</span> </p> <p class="itemLine"> <p class="item"> <p class="text">人数:</p> <p class="amount">$!{data.persons}</p> </p> <p class="item"> <p class="text">是否有车:</p> <p class="amount">#if($!data.haveCar)有#else 无#end</p> </p> </p> <p class="itemLine"> <span class="youxiaoshijian">有效时间:</span> <span class="date">$!{data.visitingTime}</span> <p class="tishi">当天有效</p> </p> <p class="bottom">进入园区时,出示此通行证给保安</p> </p> <p class="bottomline"> <p class="item" id="saveImg" style="width: 100%;">保存图片</p> </p> </p>
将以上html生成图片并下载的js如下:
首先引入html2canvas.min.js文件,然后:
$(function(){ $("#saveImg").click(function(){ html2canvas($(".tongxingzheng_bg")).then(function(canvas) { var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url window.location.href= imgUri; // 下载图片 }); }); });
至于html2canvas.min.js的用法,大家可以去官网下载,里面有几个demo参考
本文讲解了js将html生成为图片,并保存在本地,更多相关内容请关注Gxl网。
相关推荐:
js中函数的三种定义方式
JS 中的‘’真假‘’
通过JS实现判断碰撞的方法!
以上就是js将html生成为图片,并保存在本地的详细内容,更多请关注Gxl网其它相关文章!