sasamijp · August 12, 2016 11:16
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
 <head>
    <title>Self Camera</title>
    <meta charset="utf-8">
    <script src="https://code.createjs.com/easeljs-0.7.1.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
 </head>
 <body>

 <dl class="table">
    <dd><input type="file" accept="image/*" id="getfile"><dd>
    <dd><label for="txt02"></label><textarea name="txt02" id="txt02" rows="4" cols="40"></textarea></dd>
 </dl>
 <div class="btn">
    <button id="update">画像生成</button>
 </div>

 <a download id="sample-download">ダウンロード</a>
 <div class="module">
    <canvas id="result" width="2" height="2"></canvas>
 </div>

 <script>
    var address = "虚無";


    (function($){
        var img2;
        var stage;

        function loadImage (imageData){
            //if(imageData !== null) {
                var baseImg2 = new Image();
                baseImg2.src = imageData;
                img2 = new createjs.Bitmap(baseImg2);
            //}

            img2.scaleY = 1080 / img2.getBounds().height;
            img2.scaleX = 1080 / img2.getBounds().height;
            //img2.scaleX = 2560/img2.getBounds().width;
            //img2.scaleY = 1080/img2.getBounds().height;

            stage = new createjs.Stage('result');
            stage.canvas.width = img2.getBounds().width * img2.scaleX;
            stage.canvas.height = img2.getBounds().height * img2.scaleY;
        }

        function genImage (imageIni){
            stage.addChild(img2);
            var content = $('#txt02').val();
            //var content = address;
            console.log(address);
            var obj = new createjs.Text(content, "112px HGPMinchoE", "#fffff3");
            obj.setTransform(0,0,0.87,1);
            //obj.font = '27px/1.5 ヒラギノ明朝 ProN W6, Hiragino Mincho ProN, bold serif';
            obj.color = 'white';
            obj.x = (img2.getBounds().width/2 * img2.scaleX).toString();
            obj.y = (img2.getBounds().height * 0.82 * img2.scaleY).toString();
            obj.textAlign = "center";

            stage.addChild(obj);
            stage.update();

            //var base64 = stage.canvas.toDataURL();
            //blob = Base64toBlob(base64);

            document.getElementById("sample-download").href = stage.canvas.toDataURL();

        }

        $(function(){
            var imageIni = {
                imageData : null,
                makeImage : function(){
                    //if(this.imageData !== null) {
                        loadImage(this.imageData);
                        genImage(this);
                    //}
                }
            };

            $('#getfile').change(function (){
                var fileList =$('#getfile').prop('files');
                var reader = new FileReader();
                reader.readAsDataURL(fileList[0]);

                $(reader).on('load',function(){
                    //$('#preview').prop('src',reader.result);
                    imageIni.imageData = reader.result;
                });
            });

            $('.btn').on('click',function(e){
                //if(imageIni.imageData !== null){
                    imageIni.makeImage();
                //}
            });
        });
    })($);

    function getAddress(latlng) {

        // ジオコーダのコンストラクタ
        var geocoder = new google.maps.Geocoder();

        // geocodeリクエストを実行。
        // 第１引数はGeocoderRequest。緯度経度⇒住所の変換時はlatLngプロパティを入れればOK。
        // 第２引数はコールバック関数。
        geocoder.geocode({
            latLng: latlng
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0].geometry) {
                    address = []
                    //console.log(results[0].address_components);
                    for (var i in results[0].address_components){
                        //console.log(results[0].address_components[i])
                        c = results[0].address_components[i];
                        if(c.types.includes("political") &&       (c.types.includes("sublocality") &&
                                c.types.includes("sublocality_level_1") || !(c.types.includes("sublocality"))) && !(c.types.includes("country"))){
                            address.push(c.long_name)
                        }
                        console.log(results[0].address_components[i]);
                    }
                    address.reverse();
                    address = address.join("");
                    $('#txt02').val(address);
                }
            }else {
                alert("だめでした");
            }
        });
    }

    if( navigator.geolocation ){
        // 現在地を取得
        navigator.geolocation.getCurrentPosition(

                // [第1引数] 取得に成功した場合の関数
                function( position )
                {
                    // 取得したデータの整理
                    var data = position.coords ;

                    // データの整理
                    var lat = data.latitude ;
                    var lng = data.longitude ;
                    var alt = data.altitude ;
                    var accLatlng = data.accuracy ;
                    var accAlt = data.altitudeAccuracy ;
                    var heading = data.heading ;			//0=北,90=東,180=南,270=西
                    var speed = data.speed ;

                    // 位置情報
                    var latlng = new google.maps.LatLng(lat, lng);
                    getAddress(latlng);
                },

                // [第2引数] 取得に失敗した場合の関数
                function( error )
                {
                    console.log("おかしい");
                } ,

                // [第3引数] オプション
                {
                    "enableHighAccuracy": false,
                    "timeout": 8000,
                    "maximumAge": 2000
                }
        );
    } else{
        alert( "お使いの端末は、GeoLacation APIに対応していません。" );
    }


 </script>
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCR_FEQWBtwoRRQTIIYLwtzq-epJgLGafM"
        async defer></script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>Self Camera</title>
	<meta charset="utf-8">
	<script src="https://code.createjs.com/easeljs-0.7.1.min.js"></script>
	<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
	</head>
	<body>

	<dl class="table">
	<dd><input type="file" accept="image/*" id="getfile"><dd>
	<dd><label for="txt02"></label><textarea name="txt02" id="txt02" rows="4" cols="40"></textarea></dd>
	</dl>
	<div class="btn">
	<button id="update">画像生成</button>
	</div>

	<a download id="sample-download">ダウンロード</a>
	<div class="module">
	<canvas id="result" width="2" height="2"></canvas>
	</div>

	<script>
	var address = "虚無";


	(function($){
	var img2;
	var stage;

	function loadImage (imageData){
	//if(imageData !== null) {
	var baseImg2 = new Image();
	baseImg2.src = imageData;
	img2 = new createjs.Bitmap(baseImg2);
	//}

	img2.scaleY = 1080 / img2.getBounds().height;
	img2.scaleX = 1080 / img2.getBounds().height;
	//img2.scaleX = 2560/img2.getBounds().width;
	//img2.scaleY = 1080/img2.getBounds().height;

	stage = new createjs.Stage('result');
	stage.canvas.width = img2.getBounds().width * img2.scaleX;
	stage.canvas.height = img2.getBounds().height * img2.scaleY;
	}

	function genImage (imageIni){
	stage.addChild(img2);
	var content = $('#txt02').val();
	//var content = address;
	console.log(address);
	var obj = new createjs.Text(content, "112px HGPMinchoE", "#fffff3");
	obj.setTransform(0,0,0.87,1);
	//obj.font = '27px/1.5 ヒラギノ明朝 ProN W6, Hiragino Mincho ProN, bold serif';
	obj.color = 'white';
	obj.x = (img2.getBounds().width/2 * img2.scaleX).toString();
	obj.y = (img2.getBounds().height * 0.82 * img2.scaleY).toString();
	obj.textAlign = "center";

	stage.addChild(obj);
	stage.update();

	//var base64 = stage.canvas.toDataURL();
	//blob = Base64toBlob(base64);

	document.getElementById("sample-download").href = stage.canvas.toDataURL();

	}

	$(function(){
	var imageIni = {
	imageData : null,
	makeImage : function(){
	//if(this.imageData !== null) {
	loadImage(this.imageData);
	genImage(this);
	//}
	}
	};

	$('#getfile').change(function (){
	var fileList =$('#getfile').prop('files');
	var reader = new FileReader();
	reader.readAsDataURL(fileList[0]);

	$(reader).on('load',function(){
	//$('#preview').prop('src',reader.result);
	imageIni.imageData = reader.result;
	});
	});

	$('.btn').on('click',function(e){
	//if(imageIni.imageData !== null){
	imageIni.makeImage();
	//}
	});
	});
	})($);

	function getAddress(latlng) {

	// ジオコーダのコンストラクタ
	var geocoder = new google.maps.Geocoder();

	// geocodeリクエストを実行。
	// 第１引数はGeocoderRequest。緯度経度⇒住所の変換時はlatLngプロパティを入れればOK。
	// 第２引数はコールバック関数。
	geocoder.geocode({
	latLng: latlng
	}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
	if (results[0].geometry) {
	address = []
	//console.log(results[0].address_components);
	for (var i in results[0].address_components){
	//console.log(results[0].address_components[i])
	c = results[0].address_components[i];
	if(c.types.includes("political") && (c.types.includes("sublocality") &&
	c.types.includes("sublocality_level_1") \|\| !(c.types.includes("sublocality"))) && !(c.types.includes("country"))){
	address.push(c.long_name)
	}
	console.log(results[0].address_components[i]);
	}
	address.reverse();
	address = address.join("");
	$('#txt02').val(address);
	}
	}else {
	alert("だめでした");
	}
	});
	}

	if( navigator.geolocation ){
	// 現在地を取得
	navigator.geolocation.getCurrentPosition(

	// [第1引数] 取得に成功した場合の関数
	function( position )
	{
	// 取得したデータの整理
	var data = position.coords ;

	// データの整理
	var lat = data.latitude ;
	var lng = data.longitude ;
	var alt = data.altitude ;
	var accLatlng = data.accuracy ;
	var accAlt = data.altitudeAccuracy ;
	var heading = data.heading ; //0=北,90=東,180=南,270=西
	var speed = data.speed ;

	// 位置情報
	var latlng = new google.maps.LatLng(lat, lng);
	getAddress(latlng);
	},

	// [第2引数] 取得に失敗した場合の関数
	function( error )
	{
	console.log("おかしい");
	} ,

	// [第3引数] オプション
	{
	"enableHighAccuracy": false,
	"timeout": 8000,
	"maximumAge": 2000
	}
	);
	} else{
	alert( "お使いの端末は、GeoLacation APIに対応していません。" );
	}


	</script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCR_FEQWBtwoRRQTIIYLwtzq-epJgLGafM"
	async defer></script>
	</body>
	</html>