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>