Skip to content

Instantly share code, notes, and snippets.

@sasamijp
Last active August 12, 2016 11:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sasamijp/2014df6cba48cea50d02f40c766fdfc4 to your computer and use it in GitHub Desktop.
Save sasamijp/2014df6cba48cea50d02f40c766fdfc4 to your computer and use it in GitHub Desktop.
<!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リクエストを実行。
// 第1引数はGeocoderRequest。緯度経度⇒住所の変換時はlatLngプロパティを入れればOK。
// 第2引数はコールバック関数。
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment