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

blogですかい

株式会社Loco Partnersに勤めるエンジニアうちの一人のブログ。仕事、プライベートで学んだことなどを発信し、その内容がたとえ少数でも誰かの役に立ったらなら、それはとっても嬉しいなって

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にこれといって何も入っておらず、使い道がない