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>
 

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