monacaでAWS S3に画像をアップロードする
以前、S3にアップロードされた画像を自動でLINE登録用画像に変換するLambda関数について書きました。
今回は、スマホで撮った画像をS3にアップロードするところを実装しました。
スマホで撮った画像をアップロードするときに気をつけることをいくつか書いていきます。
monacaの選定理由と学習方法
monacaを選んだ理由は、Appleデベロッパプログラムにお金を払わずにiPhoneの実機で動作を確認できるからです。
趣味のプログラミングで払うお金としては少々高いので。。
学習には、ドットインストールと下の本を使いました。
※ 2016/03/05時点 ドットインストールのmonacaのレッスンは、掲載終了してるみたいですね。。
クラウドでできるHTML5ハイブリッドアプリ開発 Cordova/Onsen UIで作るiOS/Android両対応アプリ (Monaca公式ガイドブック)
- 作者: 永井勝則,アシアル株式会社
- 出版社/メーカー: 翔泳社
- 発売日: 2015/02/18
- メディア: 大型本
- この商品を含むブログ (4件) を見る
写経していけば、動くものができるという本です。
コード
上の本の、第8章の「Cordovaとデバイス機能」の8-6「カメラアプリの作成」のコードを元に作成しました。
AWS S3にファイルをアップロードするには、accessKeyIdとsecretAccessKeyが必要です。
accessKeyIdとsecretAccessKeyは、下のリンクに沿って作成して下さい。secretAccessKeyは作成時にしか確認できないのでご注意下さい。
docs.aws.amazon.com
Bucketにはアップロードしたいバケット名を記入すれば動くはずです。
気をつけるところを下で説明していきます。
S3にアップロードするときはKeyとBodyを指定する
Keyには保存したいファイル名を指定します。ここではファイル名に日付をつけてユニークにしています。
Bodyにはbase64形式のバイナリデータを指定しています。
base64形式の画像をバイナリデータにデコードする
下のリンクのmonacaの「カメラとアルバムの使用方法」を見ると、ファイル URI 形式かbase64形式を選択できるみたいです。
http://docs.monaca.mobi/3.5/ja/sampleapp/tips/camera/
ファイル自体をアップロードしたいので、base64形式の画像を取得しています。
このままbase64形式の画像のままだと拡張子jpgとして開くことができないので、バイナリデータにデコードする必要があります。
下のリンクを参考に、バイナリデータにデコードしました。(dataURItoBlob関数のところ)
forum.ionicframework.com
画像の向きを固定する
ギャラリーからアップロードした画像が90度回転していたので、optionsに「correctOrientation: true」を追加して向きを固定しました。
※ 本に書いてあるコードには、カメラの方にのみcorrectOrientationの設定が入っていました。何か理由があるのですかね。
