js generates html as images and saves them locally

htmlThere are many ways to generate images, and some require downloading and installing plug-ins, such as phantomjs. It seems a bit troublesome, and some are implemented through the background, but I personally feel that there is no need to do this kind of interaction, and there is no need to generate these zero-time files on the server. So the question is, is there any way to directly If you generate images on the page and save them locally, the answer is yes. What I introduce to you here is html2canvas. This js can convert html to canvas, and then we save the converted pictures. Not much nonsense, the implementation is as follows:

The following is the webpage that needs to generate images

The html code is as follows:

<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>

The js that generates images from the above html and downloads them is as follows:

First introduce the html2canvas.min.js file, and then:

$(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; // 下载图片
	     });
	 });
});

As for the usage of html2canvas.min.js, you can download it from the official website. There are several demos for reference

This article explains how js generates html into images and saves them locally. For more related content, please pay attention to the php Chinese website.

Related recommendations:

Three ways to define functions in js

"True and False" in JS

How to determine collision through JS!

     

The above is the detailed content of js generates html as images and saves them locally. For more information, please follow other related articles on the PHP Chinese website!