Skip to content

Instantly share code, notes, and snippets.

@ww24

ww24/create.html

Created November 7, 2011 14:53
Show Gist options
  • Save ww24/1345211 to your computer and use it in GitHub Desktop.
Save ww24/1345211 to your computer and use it in GitHub Desktop.
Download ZIP
Image Shortener
Raw
create.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Image Shortener</title>
</head>
<body>
<div id="wrapper">
<h1 class="title">URL短縮サービスを利用したオンラインストレージ</h1>
<h2 class="title">- Image Shortener -</h2>
<p>
画像をBase64エンコードし、p.tlで短縮して短いURLに変換します。<br />
保存した画像はp.tlでURLとして保管されます。<br />
※URLの生成はChrome, Safari, Firefoxで確認しています。<br />
※URLの展開ができるのは現時点で、ChromeとSafariのみです。
</p>
<strong>これはネタです。<br />※保存した画像は削除できませんのでご注意下さい。</strong>
<form action="#" id="form">
<input id="file" type="file" /><br />
</form>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26853616-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script type="text/javascript">//<![CDATA[
var hash = location.hash.slice(1);
(function () {
var split = hash.split("#"),
spLen = split.length,
ajax = function (url, callback) {
var xhr = /*@cc_on!@*/true ? new XMLHttpRequest() : new XDomainRequest();
xhr.timeout = 3000;
xhr.ontimeout = function () {
alert("XHR timeout");
};
xhr.onerror = function () {
alert("XHR error");
};
xhr.onload = function () {
callback(JSON.parse(xhr.responseText).exp);
};
xhr.open("GET", "http://ux.nu/hugeurl?format=json&url=" + url, false);
xhr.send(null);
},
ready = function () {
if (hash.length > 0) {
document.write('<meta http-equiv="refresh" content="0;u'+'rl=' + hash + '">');
} else {
location.replace("create.html");
}
};
if (spLen > 1) {
for (var i = 0; spLen > i; i++) {
(function () {
var count = i;
ajax(split[i], function (hugeURL) {
split[count] = hugeURL.slice(20);
if (spLen - 1 === count) {
hash = split.join("");
ready();
}
});
})();
}
} else {
ready();
}
})();
//]]></script>
<title>Image Shortener</title>
</head>
<body>
</body>
</html>
Raw
script.js
$(function () {
if (/*@cc_on!@*/false) alert("IEでは動きません。");
var data = "",
submit = true;
$("#file").change(function () {
var file = this.files[0];
if (file.type.split("/")[0] === "image") {
var fr = new FileReader();
fr.onload = function () {
data = fr.result;
var $data = $("#data");
if ($data.size() > 0) {
$data.remove();
}
$("#form").append('<div id="data"><img id="img" src="'+ fr.result +'" alt="image" /><br />'+
'<span id="info">Source: '+ file.size +'byte, Base64: '+ data.length +'byte <span>'+
'<input id="submit" type="submit" value="保存" /></div>');
submit = false;
if (file.size > 1000000) alert("画像のサイズが大きすぎるため、ブラウザがクラッシュする場合があります。");
};
fr.readAsDataURL(file);
} else {
if ($("#data").size() > 0) {
$("#data").remove();
submit = true;
}
$("#file").val("");
alert("画像を選択して下さい");
}
});
$("#form").submit(function () {
if (submit) return false;
submit = true;
$("#submit").remove();
$("#info").remove();
var $url = $("#data").append('Short URL :<input id="url" value="Now loading..." readonly="readonly" />').find("#url"),
size = 32510,
ajax = function (uri, callback) {
$.ajax({
type: "post",
url: "http://appcloud.info:8098/p.tl/",
data: {
q: "http://img.ww24.jp/#" + uri
},
dataType: "text",
error: function () {
alert("URL短縮中にネットワークエラーが発生しました。");
},
success: function (result) {
var shortURL = $(result).find("#shorturl").attr("value");
callback(shortURL);
}
});
},
display = function (uri) {
$url.val(uri);
$url.focus(function () {
$(this).select();
}).click(function () {
$(this).select();
});
},
split = [];
for (var i = 0; data.length > size; i++) {
split[i] = data.slice(0, size);
data = data.slice(size);
}
for (var j = 0; i > j; j++) {
(function () {
var count = j,
uri = split[j];
ajax(uri, function (url) {
split[count] = url;
if (i - 1 === count) {
ajax(data, function (url) {
split[count + 1] = url;
ajax(split.join("#"), function (url) {
display(url);
});
});
}
});
})();
}
if (i < 1) {
ajax(data, function (url) {
display(url);
});
}
return false;
});
});
Raw
server.js
/**
* Access-Control-Allow-Origin: *
* Proxy Server
* 2011/11/06
* v0.1.0
*/
var http = require('http'),
url = require('url'),
dns = require('dns'),
port = 8098;
process.on('uncaughtException', function (err) {
console.log(err);
});
var badRequest = function (res) {
var body = '400 Bad Request';
res.writeHead(400, {
'Content-Type': 'text/plain',
'Content-Length': body.length
});
res.end(body, 'utf8');
};
http.createServer(function (req, res) {
var urlParse = url.parse(req.url),
host = url.parse('http://' + urlParse.pathname.slice(1)).hostname,
contentLength = req.headers['content-length'],
cL = (typeof(contentLength) !== "undefined");
if (host.indexOf('.') !== -1) {
var path = (urlParse.pathname.slice(1) + (urlParse.search ? urlParse.search : '')).slice(host.length),
reqHeaders = {
'Content-Length': cL ? contentLength : 0
};
if (cL) reqHeaders['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
var request = http.request({
host: host,
port: 80,
path: path,
method: req.method,
headers: reqHeaders
}, function (response) {
var isText = function () {
var contentType = response.headers['content-type'];
mime = [
'text/',
'application/json'
],
len = mime.length;
for (var i = 0; len > i; i++) {
if (contentType.indexOf(mime[i]) !== -1) return true;
}
return false;
}();
if (isText) {
res.setHeader('Access-Control-Allow-Origin', 'http://img.ww24.jp');
res.writeHead(response.statusCode, response.headers);
response.setEncoding('utf8');
response.on('data', function (chunk) {
res.write(chunk);
});
response.once('end', function () {
res.end();
});
} else {
badRequest(res);
}
});
req.setEncoding('utf8');
req.on('data', function (chunk) {
request.write(chunk);
});
req.once('end', function () {
request.end();
});
} else {
badRequest(res);
}
}).listen(port);
console.log('Access-Control-Allow-Origin Server running at '+ port +' port.');
Raw
style.css
strong {
color : red;
}
.title {
text-align : center;
}
#wrapper {
width : 800px;
position : relative;
margin : 0 auto;
}
#form {
margin : 15px 0;
text-align : center;
}
#img {
max-width : 400px;
max-height : 400px;
}
@ww24
Copy link
Author

ww24 commented Nov 12, 2011

最新のものはこちらです
https://github.com/ww24/image-shortener

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment