js将html生成为图片，并保存在本地

html生成图片的方式有很多种，有的需要下载安装插件，如phantomjs 。显得未免麻烦了些，有的又是通过后台来实现的，但个人感觉没必要做这种交互，也没必要在服务端生成这些零时文件，那么问题来了，有没有什么方法，能直接在页面生成图片然后保存在本地呢，答案是肯定的。在这里我为大家介绍的是html2canvas，这款js，能将html转换为canvas，然后我们在将转换的图片保存下来，废话不多，实现如下：

以下是需要生成图片的网页

html代码如下：

<div class="tongxingzheng_bg">
  <div class="tongxingcard">
    <div class="titlebar">访客通行证</div>
    <div class="tx_content">
      <div class="wl_logo"><img src="$!webPath/resources/images/logo.png" ></div>
      <div class="xinxi">
        <div class="name">$!{data.name}</div>
        <div class="tongxingma">
          <span class="text">通行码：</span>
          <span class="code">$!{data.number}</span>
        </div>
      </div>
    </div>
    <div class="itemLine">
      <span class="mudi">目的地：</span>
      <span class="address">$!{data.property}</span>
    </div>
    <div class="itemLine">
      <div class="item">
        <div class="text">人数：</div>
        <div class="amount">$!{data.persons}</div>
      </div>
      <div class="item">
        <div class="text">是否有车：</div>
        <div class="amount">#if($!data.haveCar)有#else 无#end</div>
      </div>
    </div>
    <div class="itemLine">
      <span class="youxiaoshijian">有效时间：</span>
      <span class="date">$!{data.visitingTime}</span>
      <div class="tishi">当天有效</div>
    </div>
    <div class="bottom">进入园区时，出示此通行证给保安</div>
  </div>
  <div class="bottomline">
    <div class="item" id="saveImg" style="width: 100%;">保存图片</div>
   
  </div>
</div>

将以上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; // 下载图片
	     });
	 });
});

网页中图片不能截取下来请自行百度，有很多解决的，或者直接图片base64

至于html2canvas.min.js的用法，大家可以去官网下载，里面有几个demo参考

资源包下载（不想要C币，还最少得选2个，CSDN啊。。。）：
https://download.csdn.net/download/yyhlichao/10283228

大家也可以到以下地址下载：
http://html2canvas.hertzen.com/

http://www.bootcdn.cn/html2canvas/