js génère du HTML sous forme d'images et les enregistre localement

Il existe de nombreuses façons de générer des images en HTML, et certaines nécessitent le téléchargement et l'installation de plug-ins, tels que phantomjs. Cela semble un peu gênant, et certains sont implémentés en arrière-plan, mais je pense personnellement qu'il n'est pas nécessaire de faire ce type d'interaction, et il n'est pas nécessaire de générer ces fichiers à temps zéro sur le serveur. La question est donc la suivante. , existe-t-il un moyen de générer directement des images sur la page et de les enregistrer localement, la réponse est oui. Ce que je vous présente ici, c'est html2canvas. Ce js peut convertir du HTML en canevas, puis nous enregistrons les images converties. Pas grand-chose, l'implémentation est la suivante :

. Voici la page Web qui doit générer des images

Le code html est le suivant :

<p class="tongxingzheng_bg">
  <p class="tongxingcard">
    <p class="titlebar">访客通行证</p>
    <p class="tx_content">
      <p class="wl_logo"><img  src="/static/imghwm/default1.png"  data-src="$!webPath/resources/images/logo.png"  class="lazy"    alt="js génère du HTML sous forme d'images et les enregistre localement" ></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>

Le js qui génère des images à partir du code HTML ci-dessus et les télécharge est le suivant :

Introduisez d'abord le fichier html2canvas.min.js, puis :

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

Quant à l'utilisation de html2canvas.min.js, vous pouvez télécharger sur le site officiel, qui contient plusieurs démos pour référence

Cet article explique comment js génère du HTML dans les images et les enregistre localement. Pour plus de contenu connexe, veuillez faire attention au php chinois. site web.

Recommandations associées :

Trois façons de définir des fonctions en js

"Vrai et faux" en JS

Implémentez la méthode de détermination des collisions via JS !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!