html 画面イメージのBase64编码を取得

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 画面イメージのBase64编码を取得相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScrpitで撮るスクリーンショット</title>
</head>
<body>

  <hr>
  <div style="background-color : #AAEEDD"><h1>JavaScrpitで撮るスクリーンショット</h1></div>
  <div id="target">
  <h2>導入方法と処理概要</h2>
  <table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333" style="table-layout: fixed;">
    <tr>
      <th bgcolor="#7b9ad0" width="40"><font color="#FFFFFF">No</font></th>
      <th bgcolor="#7b9ad0" width="230"><font color="#FFFFFF">概要</font></th>
      <th bgcolor="#7b9ad0" width="230"><font color="#FFFFFF">補足</font></th>
    </tr>
    <tr>
      <td bgcolor="#b1d7e4" width="40" align="right">１</td>
      <td bgcolor="#FFFFFF" width="230" >html2canvas.jsを読み込む</td>
      <td bgcolor="#FFFFFF" width="230" ></td>
    </tr>
    <tr>
      <td bgcolor="#b1d7e4" width="40" align="right">２</td>
      <td bgcolor="#FFFFFF" width="230" >任意のタイミングでhtml2canvas関数を呼ぶ</td>
      <td bgcolor="#FFFFFF" width="230" >※今回はオンロード処理</td>
    </tr>
    <tr>
      <td bgcolor="#b1d7e4" width="40" align="right">３</td>
      <td bgcolor="#FFFFFF" width="230" >onrendered 処理にて指定のElementに画像を追記</td>
      <td bgcolor="#FFFFFF" width="230" >※[img]タグの[src]や、[a]タグの[href]など</td>
    </tr>
  </table>
  </div>
  <br>
  <hr>
  <h3>↓↓ここから画像↓↓　（上の対象のDIVを画像化）<h3>
  <img src="" id="result" />
  <h3>↑↑ここまで画像↑↑</h3>

  <hr>

  <a href="" id="ss" download="html_ss.png">スクリーンショット(document.body全体)をダウンロード</a>

  <hr>
  <h3>注意</h3>
  <ul>
    <li>実際にはスクリーンショットを撮っているわけではない</li>
    <li>html2canvasは、HTML内のDOMやCSSを解釈してCanvas上に描画するライブラリ</li>
    <li>つまり、レンダリングエンジンに近い動作をする</li>
    <li>そのため、ブラウザと異なる表示がされる場合がある</li>
    <li>flashやapplet,iframe（別URL）はうまくキャプチャできない</li>
  </ul>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
  <script>
    //ロードされた際の処理として実施：
    window.onload = function(){

      //HTML内に画像を表示
      html2canvas(document.getElementById("target"),{
        onrendered: function(canvas){
          //imgタグのsrcの中に、html2canvasがレンダリングした画像を指定する。
          var imgData = canvas.toDataURL('image/png');
          console.log(imgData.replace(/^.*,/, ''));
          document.getElementById("result").src = imgData;
        }
      });

      //ボタンを押下した際にダウンロードする画像を作る
      html2canvas(document.body,{
        onrendered: function(canvas){
          //aタグのhrefにキャプチャ画像のURLを設定
          var imgData = canvas.toDataURL();
          document.getElementById("ss").href = imgData;
        }
      });

    }
  </script>

</body>
</html>

以上是关于html 画面イメージのBase64编码を取得的主要内容，如果未能解决你的问题，请参考以下文章

html ページの迁移时にフェードアウト，フェードイン效果をだすためのjQuery的プラグイン

markdown Dockerでnoneなイメージを削除する

php 固定ページの画像パスを省略

sh 多克尔のコンテナを停止·削除，イメージ削除，体积削除

php 现在のページのナビに类を付与する关数

php WordPressの管理画面の「表示设定」で「1ページに表示する最大投稿数」の値を取得する