skillup

技術ブログ

PHP

HTMLの画像化について

投稿日:

7月にHTMLを画像化する処理なんてものをやりました。

コード自体は複雑なことはなかったんですが、新規で覚えることがそこそこあったので、メモしておきます。

html2canvas

このライブラリを使うとhtmlを画像化することができます。内部でcanvasを使っているらしいです。

https://html2canvas.hertzen.com/

注意点としては、

他のドメインの画像がうまく取得できない。

Ajaxなどでもはまりましたが、他のドメインのデータをJavaScriptで取得しようとすると色々と面倒なことがおきます。

参考

CORSまとめ

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の画像を3枚組み合わせたところ、30Mになるなどサイズが結構肥大化するようです。画像をそのまま組み合わせるというよりは、合成して組み合わせたりなど、そういった処理が影響して来るからかもしれません。

新規系の処理は要調査

単純に画像を組み合わせるだけならいいんですけど、複数ページにしたいとか、合成したいなど、色々やったことない処理を入れる場合は要調査です。

細かい調査になるとドキュメント以外に情報がないので、推測する能力もかなり必要になってきます。

-PHP
-

執筆者:


comment

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

関連記事

no image

SQSのキュー登録とworkコマンドに関して

SQSでのキューの登録に関して以前やりましたが、再度扱うことがあったので、調査を。 リンク SQSについて Queueの登録と実際の処理に関して Contents1 キューの登録2 キューの監視 キュ …

no image

PHP7に関して

先週きづいたのですが、PHPが5.6から7になりましたね。 まあ当分はまだPHP5で開発していきますが、herokuがいきなり7になり、アプリが動かないということが起こりました。 7対応させたかったん …

no image

CakePHP3でのコレクションに関して

プログラミングにおいて基礎となるのは配列、ハッシュの処理とオブジェクト指向の使いこなしです。 配列、ハッシュの処理に関しては自前でメソッドを書いてもよいですが、バグの温床になりやすいので、ライブラリを …

no image

PHPでのPDF出力 テーブル

PDFで何かを出力する場合、ほとんどが納品書や請求書などの帳票でしょう。 これらもfpdfで出力することができます。 Contents1 ソース2 サンプル3 参考リンク ソース [crayon-5d …

no image

PHPでの日付関数の扱い方

このブログの投稿数ももう少しで150近くになりました。 で、9割以上がJavaなんですが、私はPHPのスクールを運営しています(笑) ということでPHPのスキルを忘れてはいけないということで、今日はち …