js は html を画像として生成し、ローカルに保存します

HTML で画像を生成する方法はたくさんありますが、中には phantomjs などのプラグインをダウンロードしてインストールする必要があるものもあります。少し面倒なようで、バックグラウンドで実装されているものもありますが、個人的にはこの種のやり取りを行う必要はなく、サーバー上でこれらのゼロタイムファイルを生成する必要もないと感じています。そこで質問です。ページ上で画像を生成してローカルに保存する場合、答えは「はい」です。ここで紹介するのは html2canvas です。この JS は HTML を Canvas に変換し、変換された画像を保存します。実装は次のとおりです。

以下は生成する必要がある Web ページです。写真

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 の使い方については、公式サイトからダウンロードできます。参考用のデモがいくつかあります

この記事ではその方法を説明します。 js は html を画像に生成し、ローカルに保存します。その他の関連コンテンツ php の中国語 Web サイトに注意してください。

関連する推奨事項:

js で関数を定義する 3 つの方法

JS の「True と False」

JS で衝突を判定する方法!

以上がjs は html を画像として生成し、ローカルに保存しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。