プログラミンGOO

プログラミングナレッジ、ワードプレス、広告収入等について、気づき・備忘録を残していきます。

html2canvasでHTMLを画像化する備忘録

javascript

今回、スケジュールをオブジェクトで動的に表現しているHTMLのDOMを画像化する要件が発生した。

これを画像化するためにhtml2canvasを使用した。

導入

公式サイトからhtml2canvasの最新版をダウンロードして、使用する。
今回は現状の最新版であるv1.4.1の以下のファイルを選択した。
html2canvas.min.js

このjsを読み込んであげるのみ。
この使いやすさもhtml2canvasの魅力の1つ。

使い方

公式ドキュメントを読めばわかるが、使い方はいたってシンプル。
～HTML～

<div id="target">サンプル<div>

～js～

html2canvas(document.querySelector("#target"), options).then(canvas => {
    document.body.appendChild(canvas)
});

これでtargetのDOMが画像としてbody末尾に挿入される。
optionsにオプションを指定して条件を変えることができる。
optionsの一覧はOptions - html2canvasで確認できる。

例）

html2canvas(document.querySelector("#target"), {
        windowWidth: 1200,
        width: 1200
    }).then(canvas => {
    document.body.appendChild(canvas)
});

画像ダウンロード処理

画像ダウンロードはaタグにダウンロード用のリンクを埋め込むことで実現できる。
しかし、ダウンロードしたい要素は実際に描画されるわけではないのでhrefに設定するパスを静的に取得できない。
html2canvasによって作成されるキャプチャはcanvas要素で、そのURLはcanvas.toDataURL()で取得することができるため、これを利用する。
どこでも良いが、ボタンの後などに隠しリンク（aタグ）を設置し、これにURLを設定してクリックさせる。
～HTML～

<div id="outputBtn" class="btn btn-primary m-3">
  画像表示
</div>
<a id="getImage" href="" style="display: none"></a>

～js～

const outputBtn = document.getElementById("outputBtn");  //ボタン
const element = document.getElementById("schedule-outline");  //画像化したい要素
const getImage = document.getElementById("getImage");  //ダウンロード用隠しリンク

outputBtn.addEventListenner('click', function() {
  html2canvas(element).then(canvas => {
    getImage.setAttribute("href", canvas.toDataURL());
    getImage.setAttribute("download", "sample.png");
    getImage.click();
  });			
})

背景色を透過する

Optinosに以下を指定する

backgroundColor: null;

エラー対応

html2canvas(...).then is not a function

thenは関数じゃないよと言われている。html2cavasのメソッドにthenは存在しないようだ。
調べたところ、html2canvasのバージョンが最新ではないよう。
このとき、古いドキュメントを参照していて、最新バージョンではないhtml2canvasを使用していた。
最新版を入れなおすと解消した。

Widthが効かない

これもhtml2canvasが最新バージョンではなかったことが原因のよう。最新バージョンを入れなおして解消した。

Invalid shorthand property initializer

訳すとプロパティ初期化の省略形違反エラー。
Optionsのプロパティの指定の仕方が間違っている。
【誤】

Width = 100

【正】

Width: 100
画像が見切れる

html2canvasは、デフォルトでは実際にレンダリング（描画）されている範囲しかキャプチャ対象としていない。そのため、ブラウザを小さい幅で表示していればそれに合わたサイズになってしまう。
これを、最大サイズで取得、表示したい場合にはOptionsに以下を設定する。

windowWidth: 1200,    //取得する要素のサイズを指定する
width: 1200    //キャプチャを表示する際に、どのくらいのサイズで表示するかを指定する
画像がぼやける

Optinosでscaleを設定することで解像度を上げることができる

scale: 2

わかりにくければ、一度scale: 0.5とかに設定するとさらにぼやけるので、しっかり解像度が変更されていることがわかる。