エンジニアBLOG

iPhoneの画像形式としてHEIC形式の画像が存在します。

新しい形式の画像ファイルであるため現在はまだWebブラウザ上でHEICを表示することはできません。

システム上で保存したいなどと言われた場合に、一番いいのはHEIC形式の画像は使用しないで下さいということでしょうが、この要件はmustである場合もあります。

その場合どう扱うといいでしょうか。

基本的な考え方としてWebブラウザ上では使用できないのは確定なため、アイコンとして表示したい場合は表示可能な形式（JPGやPNGなど）に変換する必要があります。

画像形式の変換をする方法としてはLaravelとVueを使用する場合、以下2通りがあります。

1. フロント（Vue）側で変換して使用する
2. バックエンド（Laravel）側で変換してその画像をVue側で読み込む

１．フロント側で変換する場合

　javascriptでHEIC画像を変換する場合はHeic2anyというライブラリがあります。

　別に気にするほどのものかとも感じますが、多少重ための処理のようなので

　私が担当した案件ではサーバーサイドでやることにしました。

２．バックエンド（Laravel）側で変換する場合

　laravel側でHEIC画像を編集する場合にはImage Magickというライブラリを使用します。

　ImageMagickはいろいろな言語で画像編集ができるものでPHPでも使用できます。

　ImageMagickを使用する場合は以下の手順で行います。

1. Docker等の環境にImageMagickをインストールする。
2. Intervention Imageというcomposerのライブラリをインストール
3. Laravelの設定でIntervention ImageでImageMagickを使用する設定を行う。
4. Controllerで変換する処理を書く。

以上の手順で使用することが可能であるがImageMagickを使用する場合には気を付けなければならない点があります。

ImageMagickはよく脆弱性が指摘されるライブラリであるそう（SVGで任意のコードが実行できる等）で対応形式も多いです。（以下はサイボウズでその記事を書かれています。）

https://blog.cybozu.io/entry/2018/08/21/080000

使用する際には、対応形式を要件以上に広がらせないよう制限をする必要があります。

私が担当した案件では登録に使用できるファイル形式以外では動作しないようにしています。

最後に

今回は、Laravel、Vueの案件でHEIC画像を使用する際の注意点などをご紹介させていただきました。

早く、こういうめんどくさいことをしなくて済むよう対応してほしいです・・・。