グラフライブラリとかだとcanvasにグラフを描画してそれを画像としてダウンロードさせる、みたいなことができると思うのですが
canvasだったりSVGだったりの書き方を覚える必要があるのでサクッと画像ダウンロードさせたいだけなんだけどそれだけのために覚えるのもなーみたいな感じで思っていました。
HTML + CSS でなんとなくそれっぽく描画したDOMを画像としてダウンロードできるようにしたい。
と思って調べてみるとあるんですね。
作った人すげーなと関心してしまいます。
いくつかあったのですが先に見つけたhtml2canvas
というライブラリを使ってみます。
niklasvh/html2canvas: Screenshots with JavaScript
まだalphaバージョンのようですが1系になってpromiseベースの処理に変わったようです。
サンプルコード
Angularの場合
やってることは予めcanvasの描画用のタグを用意してあげて(cssで非表示)ボタンがクリックされたらhtml2canvas
に変換対象のエレメントを渡すだけです。
そしてthen
の中で変換されたcanvas
を受け取り用意したタグのsrc
にセットしてあげるだけです。
今回は画像としてダウンロードさせるところまでやるのでaタグにはcanvasから画像に変換したデータをセットしクリックさせてダウンロードしてもらうといった流れになってます。
これで簡単にhtmlから画像をダウンロードすることができるようになりました。
まとめ
ただのスクショだとここからここまで切り取るからーって感じでちょっと気を使ったりしますが、対象のHTMLエレメントを指定するだけでいいので変な余白なども入らずいいですね。
CDN経由で読み込んでブックマークレット作ってみるとかもありかなーと思いました。