Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@pizyumi(ゆりな🎀)

DOM要素のスクリーンショットを撮る（１）html2canvas

Posted at

DOM要素のスクリーンショットを撮る（DOM要素を画像に変換する）には幾つかの方法があるようですが、まずhtml2canvasを試してみました。

結論を先に書いておくと、html2canvasは使えませんでした。

DOM要素

スクリーンショットを撮りたいDOM要素は下のようなものとします。

  <div class="fitch">
    <div class="box">
      <div class="prem">
        <div class="background-white" style="height: 208px;"></div>
        <div class="index">(1)</div>
        <div class="rule">仮定</div>( P<sub>1</sub> → ( P<sub>2</sub> → P<sub>3</sub> ) )</div>
      <div class="preming">
        <div class="prem">
          <div class="background-black" style="height: 208px;"></div>
          <div class="index">(2)</div>
          <div class="rule">仮定</div>P<sub>2</sub></div>
        <div class="preming">
          <div class="prem">
            <div class="background-white" style="height: 208px;"></div>
            <div class="index">(3)</div>
            <div class="rule">仮定</div>P<sub>1</sub></div>
          <div class="preming">
            <div class="normal">
              <div class="background-black" style="height: 208px;"></div>
              <div class="index">(4)</div>
              <div class="rule">含意除去(3)(1)</div>( P<sub>2</sub> → P<sub>3</sub> )</div>
            <div class="normal">
              <div class="background-white" style="height: 208px;"></div>
              <div class="index">(5)</div>
              <div class="rule">含意除去(2)(4)</div>P<sub>3</sub></div>
          </div>
          <div class="conc">
            <div class="background-black" style="height: 208px;"></div>
            <div class="index">(6)</div>
            <div class="rule">含意導入(5)</div>( P<sub>1</sub> → P<sub>3</sub> )</div>
        </div>
        <div class="conc">
          <div class="background-white" style="height: 208px;"></div>
          <div class="index">(7)</div>
          <div class="rule">含意導入(6)</div>( P<sub>2</sub> → ( P<sub>1</sub> → P<sub>3</sub> ) )</div>
      </div>
      <div class="conc">
        <div class="background-black" style="height: 208px;"></div>
        <div class="index">(8)</div>
        <div class="rule">含意導入(7)</div>( ( P<sub>1</sub> → ( P<sub>2</sub> → P<sub>3</sub> ) ) → ( P<sub>2</sub> → ( P<sub>1</sub> → P<sub>3</sub> ) ) )</div>
      <div class="background-white" style="height: 208px;"></div>
    </div>
  </div>

CSS

スクリーンショットを撮りたいDOM要素に適用されるCSSは下のようなものとします。

    body {
      font-family: 'メイリオ';
      width: 1024px;
      margin: auto;
      padding: 8px;
    }

    div.fitch {
      width: 512px;
      margin: auto;
    }

    div.box {
      margin-left: 48px;
      margin-right: 128px;
      position: relative;
    }

    div.prem {
      border: solid 1px blue;
      display: inline-block;
      padding: 0px 4px 4px 4px;
    }

    div.preming {
      border-left: solid 1px blue;
      padding: 4px;
    }

    div.normal {
      padding: 4px;
    }

    div.conc {
      padding: 0px 4px 4px 4px;
    }

    div.index {
      position: absolute;
      left: -48px;
      width: 48px;
    }

    div.rule {
      position: absolute;
      left: 336px;
      width: 128px;
    }

    div.background-black {
      position: absolute;
      left: -48px;
      width: 512px;
      background-color: lightgrey;
      z-index: -1;
      height: 2048px;
    }

    div.background-white {
      position: absolute;
      left: -48px;
      width: 512px;
      background-color: white;
      z-index: -1;
      height: 2048px;
    }

スクリーンショットを撮る

スクリーンショットを撮るコードは下のようにしました。

  <a class="btn btn-primary" id="download">画像としてダウンロード</a>
  <script>
    html2canvas($('.fitch').get(0)).then((canvas) => {
      var data = canvas.toDataURL();
      document.getElementById("download").href = data;
      document.getElementById("download").download = 'test.png';
    });
  </script>

fitchクラスを有するDOM要素をhtml2canvasを利用して<canvas>要素に描画し、toDataURL関数によりその<canvas>要素からデータを取得し、<a>要素のダウンロードデータとして設定しているだけです。

利用ライブラリ

スクリーンショットを撮りたいDOM要素が含まれるHTMLドキュメントでは下のようなライブラリを利用しています。

  • Bootstrap
  • jQuery
  • Popper.js

また、当然ですが、html2canvasも利用します。

下のようなコードでライブラリを読み込むことにしました。

  <script src="/asset/lib/jquery-3.2.1/jquery-3.2.1.min.js"></script>
  <script src="/asset/lib/popper-1.0.1/popper.min.js"></script>
  <script src="/asset/lib/bootstrap-4.0.0/js/bootstrap.min.js"></script>
  <script src="/asset/lib/html2canvas/html2canvas.min.js"></script>

また、Bootstrapを利用するには他にも幾つか設定が必要です。

HTMLドキュメント

という訳で、HTMLドキュメント全体は下のようになります。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>形式化数学</title>
  <link rel="stylesheet" href="/asset/lib/bootstrap-4.0.0/css/bootstrap.min.css">
  <style>
    body {
      font-family: 'メイリオ';
      width: 1024px;
      margin: auto;
      padding: 8px;
    }

    div.fitch {
      width: 512px;
      margin: auto;
    }

    div.box {
      margin-left: 48px;
      margin-right: 128px;
      position: relative;
    }

    div.prem {
      border: solid 1px blue;
      display: inline-block;
      padding: 0px 4px 4px 4px;
    }

    div.preming {
      border-left: solid 1px blue;
      padding: 4px;
    }

    div.normal {
      padding: 4px;
    }

    div.conc {
      padding: 0px 4px 4px 4px;
    }

    div.index {
      position: absolute;
      left: -48px;
      width: 48px;
    }

    div.rule {
      position: absolute;
      left: 336px;
      width: 128px;
    }

    div.background-black {
      position: absolute;
      left: -48px;
      width: 512px;
      background-color: lightgrey;
      z-index: -1;
      height: 2048px;
    }

    div.background-white {
      position: absolute;
      left: -48px;
      width: 512px;
      background-color: white;
      z-index: -1;
      height: 2048px;
    }
  </style>
</head>

<body>
  <script src="/asset/lib/jquery-3.2.1/jquery-3.2.1.min.js"></script>
  <script src="/asset/lib/popper-1.0.1/popper.min.js"></script>
  <script src="/asset/lib/bootstrap-4.0.0/js/bootstrap.min.js"></script>
  <script src="/asset/lib/html2canvas/html2canvas.min.js"></script>

  <div class="fitch">
    <div class="box">
      <div class="prem">
        <div class="background-white" style="height: 208px;"></div>
        <div class="index">(1)</div>
        <div class="rule">仮定</div>( P<sub>1</sub> → ( P<sub>2</sub> → P<sub>3</sub> ) )</div>
      <div class="preming">
        <div class="prem">
          <div class="background-black" style="height: 208px;"></div>
          <div class="index">(2)</div>
          <div class="rule">仮定</div>P<sub>2</sub></div>
        <div class="preming">
          <div class="prem">
            <div class="background-white" style="height: 208px;"></div>
            <div class="index">(3)</div>
            <div class="rule">仮定</div>P<sub>1</sub></div>
          <div class="preming">
            <div class="normal">
              <div class="background-black" style="height: 208px;"></div>
              <div class="index">(4)</div>
              <div class="rule">含意除去(3)(1)</div>( P<sub>2</sub> → P<sub>3</sub> )</div>
            <div class="normal">
              <div class="background-white" style="height: 208px;"></div>
              <div class="index">(5)</div>
              <div class="rule">含意除去(2)(4)</div>P<sub>3</sub></div>
          </div>
          <div class="conc">
            <div class="background-black" style="height: 208px;"></div>
            <div class="index">(6)</div>
            <div class="rule">含意導入(5)</div>( P<sub>1</sub> → P<sub>3</sub> )</div>
        </div>
        <div class="conc">
          <div class="background-white" style="height: 208px;"></div>
          <div class="index">(7)</div>
          <div class="rule">含意導入(6)</div>( P<sub>2</sub> → ( P<sub>1</sub> → P<sub>3</sub> ) )</div>
      </div>
      <div class="conc">
        <div class="background-black" style="height: 208px;"></div>
        <div class="index">(8)</div>
        <div class="rule">含意導入(7)</div>( ( P<sub>1</sub> → ( P<sub>2</sub> → P<sub>3</sub> ) ) → ( P<sub>2</sub> → ( P<sub>1</sub> → P<sub>3</sub> ) ) )</div>
      <div class="background-white" style="height: 208px;"></div>
    </div>
  </div>
  <a class="btn btn-primary" id="download">画像としてダウンロード</a>
  <script>
    html2canvas($('.fitch').get(0)).then((canvas) => {
      var data = canvas.toDataURL();
      document.getElementById("download").href = data;
      document.getElementById("download").download = 'test.png';
    });
  </script>
</body>

</html>

使ってみる

実際に使ってみます。

上のHTMLドキュメントをブラウザで表示すると下のようになります。

fm11.jpg

「画像としてダウンロード」ボタンを押して画像をダウンロードします。

ダウンロードされた画像は下のようなものになりました。

fm12.jpg

残念ながら、画像の内容が正しくありません（一部の背景色が反映されていません）。html2canvasは使えないようです。

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?