diff options
| author | timb <opuscule@gmail.com> | 2015-07-18 10:46:10 -0700 |
|---|---|---|
| committer | timb <opuscule@gmail.com> | 2015-07-18 10:47:05 -0700 |
| commit | 72020acbd471992e3090a6345ecb5cc739c2c3fe (patch) | |
| tree | c6ffa2fc9bb3105e35d62a9cf626ccdef3007474 /image_metadata.html | |
| parent | 55e43788371d5a103ae225b36d10e123834c84b0 (diff) | |
test page to load colorcodes from images
Diffstat (limited to 'image_metadata.html')
| -rw-r--r-- | image_metadata.html | 113 |
1 files changed, 113 insertions, 0 deletions
diff --git a/image_metadata.html b/image_metadata.html new file mode 100644 index 0000000..ed3fffd --- /dev/null +++ b/image_metadata.html @@ -0,0 +1,113 @@ +<!doctype html> +<html> +<head> +<meta charset=utf-8> +<title>storing irc colorcodes as image/png metadata</title> +<script src="js/vendor/dataUriToBlob.js"></script> +<script src="js/vendor/FileSaver.js"></script> +<script src="js/png.js"></script> +</head> +<body> + <div id=content> + + load file: <input id=in_file type=file><br> + or url: <input id=in_url type=text> + <button id=but_load>load</button><br><br> + + <div id=log></div> + </div> + +</body> +<script> +var dom = {} +var doms = "in_url in_file but_load log".split(' ') +for (var i=0, name; name=doms[i]; i++){ + dom[name] = document.getElementById(name) +} + +var insert_colorcode = function(cc, chunks){ + var chunk = PNG.make_itxt_chunk('colorcode', cc, chunks) + // assume we wanna insert the chunk very last, just in front of the end chunk + chunks.splice(chunks.length - 1, 0, chunk) +} + +var log_clear = function(){ + dom.log.innerHTML = "" +} + +var log = function(txt){ + var html = dom.log.innerHTML + txt + "<br>" + dom.log.innerHTML = html +} + +var process_png = function(name, buf){ + log("reading " + name) + var start = Date.now() + var chunks = PNG.decode(buf, log) + if (!chunks) return; + var total = Date.now() - start + log("took " + total + "ms to decode chunks") + var chunk_txt = "" + var itxt_chunks = [] + for (var i=0, c; c=chunks[i]; i++){ + chunk_txt += " " + c.type + if (c.type === 'iTXt') itxt_chunks.push(c) + } + log("found chunks: " + chunk_txt) + if (!itxt_chunks.length){ + log("no iTXt chunks found") + return + } + var cc_chunks = [] + var start = Date.now() + for (var i=0, c; c=itxt_chunks[i]; i++){ + var itxt = PNG.decode_itxt_chunk(c) + if (itxt.keyword && itxt.keyword === 'colorcode') + cc_chunks.push(itxt) + } + var total = Date.now() - start + if (!cc_chunks.length){ + log("no colorcodes found") + return + } + log("took " + total + "ms to decode iTXt chunks") + for (var i=0, c; c=cc_chunks[i]; i++){ + log("found colorcode") + var ta = document.createElement('textarea') + ta.style.width = '500px' + ta.style.height = '300px' + ta.value = c.data + dom.log.appendChild(ta) + } + +} + +dom.in_file.value = "" + +dom.in_file.addEventListener('change', function(){ + log_clear() + var file = this.files[0] + var r = new FileReader() + r.addEventListener('load', function(){ + process_png(file.name, r.result) + }) + r.readAsArrayBuffer(file) +}) + +dom.but_load.addEventListener('click', function(){ + log_clear() + var url = "/cgi-bin/proxy?" + dom.in_url.value + // var url = "http://198.199.72.134/cors/" + dom.in_url.value + var xhr = new XMLHttpRequest() + xhr.open('GET', url, true) + xhr.responseType = 'arraybuffer' + xhr.addEventListener('load', function(){ + process_png(url, xhr.response) + }) + + xhr.send() + +}) + +</script> +</html> |