HEIC画像とは

iOSのスマホで撮影した写真の形式で、高画質でありがながら、サイズが軽いという特徴があります。
元々は「JPEG」形式だったのですが、iOS11以降より変わったようです。
拡張子はそのまま「.HIEC」もしくは「.HEIF」です。

抱えている課題

ブラウザではこのHEIC画像を表示することが出来ないという課題があります。
開発中のスマホアプリの中で、.heicのままURLをDBなどに保存し、そのURLをブラウザで表示したいとなった時に、問題が発生するという状態です。
ただ拡張子を変えても、上手く表示できません。

※ちなみに、この「.HEIC」形式の画像はiOSのアプリ内で利用する分には問題ありません。

課題を体験

以下URLにアクセスすると、ブラウザで表示されるのではなく、ローカルにダウンロードされてしまうと思います。
https://alexcorvi.github.io/heic2any/demo/1.heic
これを通常の画像と同じようにブラウザに表示したいのに、出来ないという問題に直面した方のための記事になります。

解決策

「Heic2any」を利用する。コード内で利用したい時にはこちらのライブラリを使用してみてください。

Heic2any

fetch("https://alexcorvi.github.io/heic2any/demo/1.heic")//上記に記載した、ダウンロードされてしまうURL。
    .then((res) => res.blob())
    .then((blob) => heic2any({ 
            blob,
            toType: "image/jpeg",//ここでpngを指定することもできます。 
        }))
    .then((conversionResult) => {
        var url = URL.createObjectURL(conversionResult);//変換後のURL。このURLを利用するとでブラウザでも表示できるようになる。
    })
    .catch((e) => {
        // see error handling section
    });

上記ライブラリはGIFへの変換も可能なようです。
必要であれば、利用してみてください。