ファイルストアはプランによってファイル上限サイズが異なります。無料のBasicプランの場合は5MB、有料の場合は100MBまでのファイル制限となっています。
最近のスマートフォンでは写真の解像度が上がっており、5MBを超えるケースも出てきています。その結果、ファイルアップロードに失敗してしまう場合があります。この記事ではそういった問題を防ぐ方法をMonaca、JavaScriptを使った場合で紹介します。
利用するライブラリ
Donaldcwl/browser-image-compressionというライブラリがあります。これはファイルサイズを縮小してくれるライブラリになります。まず、これをインストールします。CDNの場合は次のようになります。
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browser-image-compression@1.0.13/dist/browser-image-compression.js"></script>
利用例
元のファイルアップロード処理が次のようになっていたとします。ファイル選択ダイアログでファイルを選ぶと、自動的にアップロードを開始する処理です。
document.querySelector('#file').onchange = async e => { try { const file = e.target.files[0]; const fileName = 'test.jpg'; await ncmb.File.upload(fileName, file); } catch (e) { document.querySelector('#result').innerText = JSON.stringify(e); } }
この場合、次のようなエラーになります。ファイルサイズの上限を超えたというメッセージが出ます。
そこで、 browser-image-compression を間に挟みます。
document.querySelector('#file').onchange = async e => { try { const file = e.target.files[0]; const cFile = await imageCompression(file, { maxSizeMB: 5, }); const fileName = '1-1.jpg'; await ncmb.File.upload(fileName, cFile); } catch (e) { document.querySelector('#result').innerText = JSON.stringify(e); } }
これでファイルサイズを上限5MBに収まるように圧縮してくれます。ほかにも画像の最大高さ、幅を指定することもできます。
差異
元の画像と、変換後の画像です。元の画像は10.6MBだったのに対して、4.2MBまで容量が削減しています。サイズは5472x3648だったのに対して、4938 × 3291に縮小しています。約90%の大きさになっていますが、アプリの中で見る分には特に問題にはならないでしょう。また、EXIFデータはすべて消えています。
画像の圧縮処理ですが、数秒かかるようです。アップロード時間もありますので、処理中はインジケータを出す方がユーザビリティが高くなるでしょう。
まとめ
今後スマートフォンが高機能化するのに伴って、画像ファイルサイズはどんどん大きくなることでしょう。新世代の画像フォーマットもありますが、やはり写真の基本はJPEGのようです。ユーザによってアップロードできる、できないといった問題が生じた場合には、ファイルサイズを疑ってみてください。