読者です 読者をやめる 読者になる 読者になる

やーまんぶろぐ

気が向いた時にだけ書くブログ

monacaでAWS S3に画像をアップロードする

monaca AWS S3

以前、S3にアップロードされた画像を自動でLINE登録用画像に変換するLambda関数について書きました。

yamano3201.hatenablog.jp

今回は、スマホで撮った画像をS3にアップロードするところを実装しました。

スマホで撮った画像をアップロードするときに気をつけることをいくつか書いていきます。

monacaの選定理由と学習方法

スマホ側の実装にはmonacaを選びました。

monacaを選んだ理由は、Appleデベロッパプログラムにお金を払わずにiPhoneの実機で動作を確認できるからです。
趣味のプログラミングで払うお金としては少々高いので。。

学習には、ドットインストールと下の本を使いました。
※ 2016/03/05時点 ドットインストールのmonacaのレッスンは、掲載終了してるみたいですね。。

写経していけば、動くものができるという本です。

コード

上の本の、第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の設定が入っていました。何か理由があるのですかね。

最後に

以前の記事と合わせると、スマホで撮った画像を自動でLINE登録用画像に変換するところまでできました。

このままだと変換後の画像が確認できないので、DropBoxにアップロードしてスマホから確認できるようにしようかなーと思います。

また気が向いたら、書きます。