JavaScript

html2canvasを使ってhtmlサイトを画像化!

みなさん、こんにちは。どんぶラッコです。

今日は、html2canvasの使い方についてまとめていこうと思います。

みなさん、Webブラウザ上で書き出されているものをそのまま画像にしたいと思ったことはありませんか?

今回の私の場合、画像の上にJSONファイルを基に枠線を合成したHTMLを生成しており、それを枠線ごと画像化させたいという要望がありました。

どんぶラッコ
どんぶラッコ
画像自体は見せられませんが、ニュアンスは伝わりますかね?

ということで、なんとかHTMLを画像化できないかと探していたところ、 html2canvas という神様ライブラリを見つけてしまいましった。

https://html2canvas.hertzen.com/

これ、私とても感動しました。

ということで、今回は上記のセットアップ方法と私がちょっと詰まった箇所があったのでそのご紹介をしていきます。

どんぶラッコ
どんぶラッコ
Vue.jsで作成していますが、基本的に書き方は変わらないです!
グランくん
グランくん
今回は「画像を保存」ボタンを押すと、キャプチャされた画像がそのままダウンロードされる…という仕様で作っていくよ!

セットアップ・実装

まずは npm または yarn を通じて html2canvas をインストールします。

npm i html2canvas
# または
yarn add html2canvas

そしたら、キャプチャしたい要素にidを振ります。今回は 単純に capture とします。

ついでに、画像保存用のボタンを作っておきます。

<div>
  <v-btn
    id="save-btn"
    @click="captureImage"
  >
  画像を保存
  </v-btn>
  <div id="capture">
  </div>
</div>

そして、キャプチャするメソッドを実装していきます。

先ほどボタンに付与した captureImage() メソッドを作りましょう。

import html2canvas from 'html2canvas'

export default {
  // ...中略
  methods: {
    captureImage () {
      html2canvas(document.querySelector('#capture')).then((canvas) => {
        const link = document.createElement('a')
        link.href = canvas.toDataURL()
        link.download = `export_image.png`
        link.click()
      })
    }
  }
}

これだけです!非常にわかりやすいですね。

html2canvas(要素).then((canvas) => {}) が肝です。要素に先ほど書き出したいと指定した capture を指定しています。すると、戻り値としてcanvas要素を返してくれます。

今回はダウンロードをさせたいので、それ以降の行でダウンロード用のaタグを作り、それをクリックしてダウンロードさせています。

どんぶラッコ
どんぶラッコ
この書き方はFirefoxでは使えないという記事も見かけたので、本番サイトで利用されたい方は記法に気をつけてください!
今回は私がchromeで利用できればOKなので、特に気にせず実装を進めてしまいます。

windowからはみ出してしまった要素もキャプチャしたい場合は?

しかし、これだけでは不十分な場合があります。

私の場合、ウィンドウからはみ出した画像を全てキャプチャしたいという希望があったのですが、ウィンドウ幅で切られてしまっていました。

そんな場合は、 html2canvas() にオプションを渡して上げてウィンドウ幅とキャプチャ幅を変更してあげましょう。

import html2canvas from 'html2canvas'

export default {
  // ...中略
  methods: {
    captureImage () {
      html2canvas(document.querySelector('#capture'), {
        // キャプチャ幅を変更する
        width: this.captureWidth,
        // html2canvas のウィンドウ幅を変更する
        windowWidth: this.captureWidth,
        // キャプチャ長さを変更する
        height: this.captureHeight
      }).then((canvas) => {
        const link = document.createElement('a')
        link.href = canvas.toDataURL()
        link.download = `export_image.png`
        link.click()
      })
    }
  }
}

他のオプションについては公式サイトを参照してください。

https://html2canvas.hertzen.com/configuration

これで解決します!


みなさんも使ってみてください♪

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニアを経て、quintet株式会社CTOに就任。普段はNuxt.jsやLaravelを使用しています。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です