浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

navigator.camera.getPictureで取得したbase64をローカルストレージに安全に保存する

コルドバが提供している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プラグイン内で解決できてしまう

ことに気づいた時は本当に便利・助かるなぁと感じました。

  • この記事いいね! (0)