【2019年度版】JavaScriptでhtmlを画像化する方法(html2canvasの使い方)

プログラミング

はじめに

その使い方をご紹介します。

htmlで記述したページをJavaScriptで「Canvasに表示したい!」「画像化したい!」というときには、「html2canvas」というライブラリが便利です。

CDNを使うやり方は、便利ですが、Version 0.4.1等の昔のバージョンしか公開されていないため、公式がお勧めしている、最新版の使い方をご紹介します。

html2canvas.jsファイルを作成する

ソースコードの内容は公式で公開されているので、これをコピーして、自分のアプリケーションの任意の場所に「html2canvas.js」ファイルとして保存しましょう。

公式サイトにアクセスして、通常版の「html2canvas.js」かmin版の「html2canvas.min.js」を選択して、クリックします。

今回の例では通常版を選びます。

開いたページで、ライブラリのソースコードがコピーできるので、ページを開いて全体を選択して、コピーします。

テスト用にフォルダを1つ作ってそのなかに「html2canvas.js」ファイルを作成します。

ここで、作成した 「html2canvas.js」 に先ほどコピーしたライブラリのソースコードを入りつけて保存します。

テスト用にhtmlファイルを作成する

先ほど作ったフォルダに「index.html」を作成します。

index.htmlには、htmlファイルのひな型を書いておきます。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

  </body>
</html>

bodyタグに、公式ページに書いてある、デモ用のコードをコピペしましょう。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    
    <div id="capture" style="padding: 10px; background: #f5da55">
      <h4 style="color: #000; ">Hello world!</h4>
    </div>

  </body>
</html>

次に、bodyタグ内にscriptタグを追加します。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    
    <div id="capture" style="padding: 10px; background: #f5da55">
      <h4 style="color: #000; ">Hello world!</h4>
    </div>

    <script type="text/javascript">
      
    </script>

  </body>
</html>

scriptタグ内には、公式に公開されているデモのコードをコピペしましょう。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

    <div id="capture" style="padding: 10px; background: #f5da55">
      <h4 style="color: #000; ">Hello world!</h4>
    </div>

    <script type="text/javascript">
      html2canvas(document.querySelector("#capture")).then(canvas => {
          document.body.appendChild(canvas)
      });
    </script>

  </body>
</html>

現段階ではhtml2canvasは使えません、先ほど作った「html2canvas.js」を読み込みます。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

    <div id="capture" style="padding: 10px; background: #f5da55">
      <h4 style="color: #000; ">Hello world!</h4>
    </div>

    <script src = "html2canvas.js"></script>
    <script type="text/javascript">
      html2canvas(document.querySelector("#capture")).then(canvas => {
          document.body.appendChild(canvas)
      });
    </script>

  </body>
</html>

保存したら、「index.html」をブラウザで開いてみましょう。
下図のように、Hello World!が2つ出ていればOKです。

使い方

html2canvasは以下の書き方で使うことができます。

      html2canvas(エレメント).then(canvas => {
          処理
      });

Promiseと似たような書き方です。

.then()の中に、コールバック関数(例ではアロー関数)を使ってやりたいことを記述していきます。

例では、htmlからレンダリングされ、作成されたcanvas要素をappendChildしています。

ブラウザで確認した結果の、上がhtml、下がhtmlをもとに作られたcanvas要素だったというわけですね。

※ IEではアロー関数を使うことができません。構文エラーになります。
無名関数を使うことで代用できます。

      html2canvas(エレメント).then(function(canvas){
        処理
      });

画像化する

canvas化ができれば、toDataUrl()を使うことで簡単に画像化できます。

例にimgタグを追加して画像化してみます。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

    <div id="capture" style="padding: 10px; background: #f5da55">
      <h4 style="color: #000; ">Hello world!</h4>
    </div>

    <img src="" alt="" id="canvas-image">

    <script src = "html2canvas.js"></script>
    <script type="text/javascript">
      html2canvas(document.querySelector("#capture")).then(canvas => {
        // canvasをimgtタグに挿入できる形に変更
        var imageData = canvas.toDataURL();
        // imgタグに画像として、canvasの内容を挿入
        document.getElementById('canvas-image').setAttribute("src",canvas.toDataURL());
      });
    </script>

  </body>
</html>

オプションを設定する

html2canvasはいろいろなオプションを設定できます。

設定できるオプションの種類は、下記の公式サイトから確認できます。

Options
Explore the different configuration options available for html2canvas

オプションは下記の要領で設定できます。

html2canvas(エレメント,{項目1:値,項目2:値...}).then(function(canvas){
  処理
});

試しに先ほどの画像の例を利用して、「scale(大きさ)」を設定してみます。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

    <div id="capture" style="padding: 10px; background: #f5da55">
      <h4 style="color: #000; ">Hello world!</h4>
    </div>

    <img src="" alt="" id="canvas-image">

    <script src = "html2canvas.js"></script>
    <script type="text/javascript">
      html2canvas(document.querySelector("#capture"),{scale:3}).then(canvas => {
        // canvasをimgtタグに挿入できる形に変更
        var imageData = canvas.toDataURL();
        // imgタグに画像として、canvasの内容を挿入
        document.getElementById('canvas-image').setAttribute("src",canvas.toDataURL());
      });
    </script>

  </body>
</html>

以上。

タイトルとURLをコピーしました