7月にHTMLを画像化する処理なんてものをやりました。
コード自体は複雑なことはなかったんですが、新規で覚えることがそこそこあったので、メモしておきます。
Contents
html2canvas
このライブラリを使うとhtmlを画像化することができます。内部でcanvasを使っているらしいです。
https://html2canvas.hertzen.com/
注意点としては、
他のドメインの画像がうまく取得できない。
Ajaxなどでもはまりましたが、他のドメインのデータをJavaScriptで取得しようとすると色々と面倒なことがおきます。
参考
html2canvasも他のドメインを設定する用のオプションが色々とあり、うまくいくケースもありましたが、完全に制御できませんでした。画像側の設定をする必要もあるかもしれないです。(Content-Typeなど?)
一部のCSSが使えない
HTMLをpdfにしようとしたりした時も起こりましたが、主にCSS3で便利なプロパティなどは使えないことが多いです。流石に flex とかは大丈夫何ですが、ブラウザで見えていたのに崩れる・・なんてことがあるので注意しましょう。
画質に限界がある
ある程度画質にこだわる場合、限界があるかもしれないです。
私のケースの場合、ここからさらにhtml2canvasでできた画像(png)をPDFとして保存するという処理をかませたので、画質がかなり落ち、結果として元の画像をかなり大きくしないといけませんでした。
最初からPDFで出力を考える場合は、htmlをpdfにするライブラリを使った方がいいかもしれません。
オススメはwkhtmltopdfです。
imagick
私のケースではhtmlで作った画像をさらに組み合わせたり、加工したりするのにimagickというライブラリを使いました。
画像→PDFは画質が大幅に落ちる
当たり前かもしれませんが、画像からPDFにした時点で画質がかなり落ちます。逆(PDF→画像)は結構ある気もしますが、画像のPDF化はあまりやらないかもしれませんね・・・
そもそも画像の保存方法そのものが根本的に違うので仕方ないかもしれませんが、最初からPDFにする場合は、やはりhtmlをpdf化した方が画質はいいでしょう。
サイズが肥大化すること
2Mの画像を３枚組み合わせたところ、30Mになるなどサイズが結構肥大化するようです。画像をそのまま組み合わせるというよりは、合成して組み合わせたりなど、そういった処理が影響して来るからかもしれません。
新規系の処理は要調査
単純に画像を組み合わせるだけならいいんですけど、複数ページにしたいとか、合成したいなど、色々やったことない処理を入れる場合は要調査です。
細かい調査になるとドキュメント以外に情報がないので、推測する能力もかなり必要になってきます。
