notebook

都内でWEB系エンジニアやってます。

html2canvasでhtmlからcanvasに変換して画像として保存する

グラフライブラリとかだとcanvasにグラフを描画してそれを画像としてダウンロードさせる、みたいなことができると思うのですが

canvasだったりSVGだったりの書き方を覚える必要があるのでサクッと画像ダウンロードさせたいだけなんだけどそれだけのために覚えるのもなーみたいな感じで思っていました。

HTML + CSS でなんとなくそれっぽく描画したDOMを画像としてダウンロードできるようにしたい。

と思って調べてみるとあるんですね。

作った人すげーなと関心してしまいます。

いくつかあったのですが先に見つけたhtml2canvasというライブラリを使ってみます。

niklasvh/html2canvas: Screenshots with JavaScript

github.com

まだalphaバージョンのようですが1系になってpromiseベースの処理に変わったようです。

サンプルコード

Angularの場合

やってることは予めcanvasの描画用のタグを用意してあげて(cssで非表示)ボタンがクリックされたらhtml2canvasに変換対象のエレメントを渡すだけです。

そしてthenの中で変換されたcanvasを受け取り用意したタグのsrcにセットしてあげるだけです。

今回は画像としてダウンロードさせるところまでやるのでaタグにはcanvasから画像に変換したデータをセットしクリックさせてダウンロードしてもらうといった流れになってます。

これで簡単にhtmlから画像をダウンロードすることができるようになりました。

まとめ

ただのスクショだとここからここまで切り取るからーって感じでちょっと気を使ったりしますが、対象のHTMLエレメントを指定するだけでいいので変な余白なども入らずいいですね。

CDN経由で読み込んでブックマークレット作ってみるとかもありかなーと思いました。