html生成图片的方式有很多种,有的需要下载安装插件,如phantomjs 。显得未免麻烦了些,有的又是通过后台来实现的,但个人感觉没必要做这种交互,也没必要在服务端生成这些零时文件,那么问题来了,有没有什么方法,能直接在页面生成图片然后保存在本地呢,答案是肯定的。在这里我为大家介绍的是html2canvas,这款js,能将html转换为canvas,然后我们在将转换的图片保存下来,废话不多,实现如下:
以下是需要生成图片的网页
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生成为图片,并保存在本地,更多相关内容请关注php中文网。
相关推荐:
以上就是js将html生成为图片,并保存在本地的详细内容,更多请关注php中文网其它相关文章!
HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号