canvasで編集した画像をAWS SDK for JavaScript in the Browserを使ってS3にアップロードする
アップロード用ユーザの作り方は「S3 IAM policy」で検索
バケットの設定は「S3 Bucket policy」で検索
単にローカルファイルをアップロードしたいだけなら
AWSの公式サンプルを参考にすれば簡単に実装できます。
http://aws.amazon.com/jp/developers/getting-started/browser/
canvasで作成した画像をS3にアップロードするには
ここから本題
S3へファイルをアップロードする際には、putObject()というメソッドを使用します。
putObject()に与えるハッシュのBodyというキーの値は、input[type=file]か、ファイルのバイナリ列を渡さなければなりません。
ところがcanvasから画像のバイナリ列を取り出す手段は(たぶん)無く、toDataURL()でBase64エンコードされた文字列を取り出し、バイナリにデコードする必要があります。
dataURLをバイナリに変換するライブラリをGithubで見つけましたので、それを使用しました。 https://github.com/rgeraldporter/canvas-polyfill-DataURLtoBlob/blob/master/dataURLtoBlob.js
以下のようなコードを書きました。(canvasの操作をする処理等は省略しております)
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="https://sdk.amazonaws.com/js/aws-sdk-2.0.0-rc1.min.js"></script> <script type=“text/javascript” src=“https://rawgithub.com/rgeraldporter/canvas-polyfill-DataURLtoBlob/master/dataURLtoBlob.js”></script> </head> <body> <div> <canvas id="TheCanvas"></canvas> <button id="TheButton">upload</button> </div> <script type="text/javascript"> var bucketName = 'YourBucketName'; var regionName = 'ap-northeast-1'; AWS.config.update({ accessKeyId: 'YourAccessKeyId', secretAccessKey: 'YourSecretAccessKey', }); var bucket = new AWS.S3({ params: { Bucket: bucketName, Region: regionName, }, }); $(function () { $('#TheButton').on('click', function () { var canvas = $(‘#TheCanvas’); var dataURL = canvas[0].toDataURL(‘image/jpeg’); var binaryData = dataURLtoBlob(dataURL); bucket.putObject( { 'ACL': 'public-read', 'Key': ‘YourUploadingObjectKey’, 'ContentType': 'image/jpeg', 'Body': binaryData, }, function (error, data) { if (error === null) { } else { } } ); }); }); </script> </body> </html>
注意
- 性質上、アクセスキーを隠すことができないので、publicなアプリケーションには使用しないこと
気になること
- putObject()のコールバック関数に渡されるdataにこれといって何も入っておらず、使い道がない