yamano/monaca_s3_upload.html

## monaca_s3_upload.html
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.2.37.min.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        ons.bootstrap();
        var getPictureFromGallery = function(onSuccess) {
            var options = {
                quality: 50,
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
                encodingType: Camera.EncodingType.JPEG,
                correctOrientation: true,
                destinationType: Camera.DestinationType.DATA_URL
            };
            navigator.camera.getPicture(function(DATA_URL) {
                onSuccess(DATA_URL);
            }, onFail, options);
        };

        var getPictureFromCamera = function(onSuccess) {
            var options = {
                quality: 50,
                sourceType : Camera.PictureSourceType.CAMERA,
                saveToPhotoAlbum: true,
                correctOrientation: true,
                destinationType: Camera.DestinationType.DATA_URL
            };
            navigator.camera.getPicture(function(DATA_URL) {
                onSuccess(DATA_URL);
            }, onFail, options);
        };

        function onFail() {
            console.log("写真を取得できませんでした")
        }

        var dataURItoBlob = function(DATA_URL) {
            var binary = atob(DATA_URL);
	        var array = [];
	        for (var i = 0; i < binary.length; i++) {
	            array.push(binary.charCodeAt(i));
	        }
	        return new Blob([new Uint8Array(array)], {
	        });
	   }

        $(document).on('pageinit', '#main-page', function() {
            ons.createAlertDialog('loading.html');
            var onSuccess = function(DATA_URL) {
                loading.show();
                AWS.config.update({accessKeyId: 'AKIAJ5ZL3U54ZRU6GAYQ', secretAccessKey: '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'});
                var bucket = new AWS.S3({params: {Bucket: 'for-image'}});
                if (DATA_URL) {
                    var data = dataURItoBlob(DATA_URL);
                    var d = new Date();
                    var time = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate() + "_" + d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds();
                    var params = {Key: "img-" + time + ".jpg", Body: data};
                    bucket.putObject(params, function (err, data) {
                        loading.hide();
                    });
                } else {
                }
            }
            $(this).on('click', '.take-from-camera', function() {
                getPictureFromCamera(onSuccess);
            });
            $(this).on('click', '.take-from-gallery', function() {
                getPictureFromGallery(onSuccess);
            });
        });
    </script>
</head>
<body>
    <ons-navigator var="myNavi">
        <ons-page id="main-page">
            <ons-toolbar>
                <div class="center">写真加工アプリ</div>
            </ons-toolbar>
            <br>
            <ons-list>
                <ons-list-item modifier="chevron" class="take-from-gallery">
                    <ons-icon icon="ion-images"></ons-icon> ギャラリーから選ぶ
                </ons-list-item>
                <ons-list-item modifier="chevron" class="take-from-camera">
                    <ons-icon icon="ion-camera"></ons-icon> カメラで撮影
                </ons-list-item>
            </ons-list>
            <br>
        </ons-page>
    </ons-navigator>

    <ons-template id="loading.html">
        <ons-alert-dialog var="loading">
            <div class="alert-dialog-title">処理中</div>
            <div class="alert-dialog-content">
                <ons-icon icon="ion-load-c" spin="true"></ons-icon> <span style="font-size: 13px; color: #999">画像をアップロードしています</span>
            </div>
        </ons-alert-dialog>
    </ons-template>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
	<script src="components/loader.js"></script>
	<script src="https://sdk.amazonaws.com/js/aws-sdk-2.2.37.min.js"></script>
	<link rel="stylesheet" href="components/loader.css">
	<link rel="stylesheet" href="css/style.css">
	<script>
	ons.bootstrap();
	var getPictureFromGallery = function(onSuccess) {
	var options = {
	quality: 50,
	sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
	encodingType: Camera.EncodingType.JPEG,
	correctOrientation: true,
	destinationType: Camera.DestinationType.DATA_URL
	};
	navigator.camera.getPicture(function(DATA_URL) {
	onSuccess(DATA_URL);
	}, onFail, options);
	};

	var getPictureFromCamera = function(onSuccess) {
	var options = {
	quality: 50,
	sourceType : Camera.PictureSourceType.CAMERA,
	saveToPhotoAlbum: true,
	correctOrientation: true,
	destinationType: Camera.DestinationType.DATA_URL
	};
	navigator.camera.getPicture(function(DATA_URL) {
	onSuccess(DATA_URL);
	}, onFail, options);
	};

	function onFail() {
	console.log("写真を取得できませんでした")
	}

	var dataURItoBlob = function(DATA_URL) {
	var binary = atob(DATA_URL);
	var array = [];
	for (var i = 0; i < binary.length; i++) {
	array.push(binary.charCodeAt(i));
	}
	return new Blob([new Uint8Array(array)], {
	});
	}

	$(document).on('pageinit', '#main-page', function() {
	ons.createAlertDialog('loading.html');
	var onSuccess = function(DATA_URL) {
	loading.show();
	AWS.config.update({accessKeyId: 'AKIAJ5ZL3U54ZRU6GAYQ', secretAccessKey: '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'});
	var bucket = new AWS.S3({params: {Bucket: 'for-image'}});
	if (DATA_URL) {
	var data = dataURItoBlob(DATA_URL);
	var d = new Date();
	var time = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate() + "_" + d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds();
	var params = {Key: "img-" + time + ".jpg", Body: data};
	bucket.putObject(params, function (err, data) {
	loading.hide();
	});
	} else {
	}
	}
	$(this).on('click', '.take-from-camera', function() {
	getPictureFromCamera(onSuccess);
	});
	$(this).on('click', '.take-from-gallery', function() {
	getPictureFromGallery(onSuccess);
	});
	});
	</script>
	</head>
	<body>
	<ons-navigator var="myNavi">
	<ons-page id="main-page">
	<ons-toolbar>
	<div class="center">写真加工アプリ</div>
	</ons-toolbar>
	<br>
	<ons-list>
	<ons-list-item modifier="chevron" class="take-from-gallery">
	<ons-icon icon="ion-images"></ons-icon> ギャラリーから選ぶ
	</ons-list-item>
	<ons-list-item modifier="chevron" class="take-from-camera">
	<ons-icon icon="ion-camera"></ons-icon> カメラで撮影
	</ons-list-item>
	</ons-list>
	<br>
	</ons-page>
	</ons-navigator>

	<ons-template id="loading.html">
	<ons-alert-dialog var="loading">
	<div class="alert-dialog-title">処理中</div>
	<div class="alert-dialog-content">
	<ons-icon icon="ion-load-c" spin="true"></ons-icon> <span style="font-size: 13px; color: #999">画像をアップロードしています</span>
	</div>
	</ons-alert-dialog>
	</ons-template>
	</body>
	</html>