首頁  >  文章  >  web前端  >  js將html生成為圖片,並保存在本地

js將html生成為圖片,並保存在本地

jacklove
jacklove原創
2018-06-15 16:02:404677瀏覽

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中函數的三種定義方式

JS 中的''真假''

透過JS實作判斷碰撞的方法!

           

以上是js將html生成為圖片,並保存在本地的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn