コルドバが提供しているnavigator.camera.getPictureプラグインを使って
スマホカメラで撮影した画像のbase64を取得する処理を書いていたのですがiphoneで
撮影した画像のbase64をローカルストレージに保存しようとしたところ
the quota has been exceededというエラーが出てローカルストレージに保存できませんでした。
ハイブリッドアプリなのでiphone・android両方で見ないといけないのですが、android
ではちゃんと保存はできてiphoneだけが保存できない状態にありました。
まずこのエラーは、保存しようとしたデータがローカルストレージに保存できる容量を超えた
場合に出てきます。
そして、今回保存しようとしたのがbase64(何十行にもわたる画像を示すurl)で、このクソ長い文字が
悪さをしてるかと思いきや本質はそこでなく、実際はその画像を取り巻くクオリティが
ローカルストレージに影響を及ぼすことがわかりました。
例えば、解像度が高かったり撮影した画像のサイズが大きかったりするとこの規定に引っかかります。
後はiphone標準ブラウザのsafariが画像の重さに耐えられなくて死ぬとかそんなんです。chromeは
大丈夫なのにね・・。
最悪また画像取得の骨組みを壊さないといけないと考えていたのですが、今使っている
navigator.camera.getPictureプラグインのオプションで全て解決できることが判りました。
まず、オプションを見てみます。
const options = {
sourceType: window.navigator.camera.PictureSourceType.CAMERA,
quality: 20,
destinationType: window.navigator.camera.DestinationType.DATA_URL,
correctOrientation: true,
targetWidth: 400,
targetHeight: 800
};
キモはqualityとtargetWidthとtargetHeight。
qualityは画像の解像度、targetWidthは取得した画像の幅、targetHeightは画像の高さに
なります。qualityを上げすぎると画像が重くなり、targetWidth・Heightの値を変えると
その指定した比率で表示してくれるようになります。つまりこの三点を上手い具合に調節することで
iphoneでもローカルストレージの容量を気にすることなくリクエストできるようになります。
そんな簡単にできていいの？リサイズってfileReader使ったりとめんどうな印象しかないのだけどと
思い込んでいたのですが、全てnavigator.camera.getPictureプラグイン内で解決できてしまう
ことに気づいた時は本当に便利・助かるなぁと感じました。
