js generiert HTML als Bilder und speichert sie lokal

Es gibt viele Möglichkeiten, Bilder in HTML zu generieren, und einige erfordern das Herunterladen und Installieren von Plug-Ins, wie z. B. phantomjs. Es scheint etwas mühsam zu sein, und einige werden im Hintergrund implementiert, aber ich persönlich bin der Meinung, dass diese Art von Interaktion nicht erforderlich ist und diese Nullzeitdateien nicht auf dem Server generiert werden müssen. Die Frage ist also Gibt es eine Möglichkeit, Bilder direkt auf der Seite zu generieren und lokal zu speichern? Die Antwort lautet „Ja“. Was ich Ihnen hier vorstelle, ist html2canvas. Dieses JS kann HTML in Canvas konvertieren, und dann speichern wir die konvertierten Bilder. Die Implementierung ist wie folgt:

Das Folgende ist die Webseite, die Bilder generieren muss

Der HTML-Code lautet wie folgt:

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

Der obige HTML-Code generiert Bilder und lädt die js wie folgt herunter:

Führen Sie zuerst die Datei html2canvas.min.js ein, dann:

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

Was die Verwendung von html2canvas.min.js betrifft, können Sie es von der offiziellen Website herunterladen mehrere Demos als Referenz

In diesem Artikel wird erläutert, wie Sie mit js HTML in Bilder generieren und lokal speichern. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Drei Möglichkeiten, Funktionen in js zu definieren

„Wahr und falsch“ in JS

Implementieren Sie die Methode zur Kollisionsbestimmung durch JS!

Das obige ist der detaillierte Inhalt vonjs generiert HTML als Bilder und speichert sie lokal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!