attach colorcode as metadata to all generated pngs

5 files changed, 237 insertions, 11 deletions

diff --git a/index.html b/index.html
index fe4f43a..44c04ce 100644
--- a/index.html
+++ b/index.html
@@ -94,6 +94,7 @@
 <script src="js/vendor/FileSaver.js"></script>
 
 <script src="js/util.js"></script>
+<script src="js/png.js"></script>
 <script src="js/unicode.js"></script>
 <script src="js/color.js"></script>
 <script src="js/clipboard.js"></script>
diff --git a/js/clipboard.js b/js/clipboard.js
index 44f9ad2..ee79320 100644
--- a/js/clipboard.js
+++ b/js/clipboard.js
@@ -245,22 +245,22 @@ var clipboard = (function () {
     filename: function () {
       return [ +new Date, "ascii", user.username ].join("-")
     },
-    
+
     save_png: function () {
-      var save_fn = function(canvas){
+      var save_fn = function(canvas_out){
         var filename = clipboard.filename() + ".png"
-        var blob = dataUriToBlob(canvas.toDataURL())
+        var blob = PNG.canvas_to_blob_with_colorcode(canvas_out, canvas.mirc())
         saveAs(blob, filename);
       }
       clipboard.export_canvas(save_fn)
     },
     
     upload_png: function () {
-      var upload_fn = function(canvas){
-        var uri = canvas.toDataURL()
+      var upload_fn = function(canvas_out){
+        var blob = PNG.canvas_to_blob_with_colorcode(canvas_out, canvas.mirc())
         var filename = clipboard.filename()
         var tag = 'ascii'
-        upload(uri, filename, tag)
+        upload(blob, filename, tag)
       }
       clipboard.export_canvas(upload_fn)
     },
diff --git a/js/png.js b/js/png.js
new file mode 100644
index 0000000..3c165dc
--- /dev/null
+++ b/js/png.js
@@ -0,0 +1,217 @@
+var PNG = (function(){
+
+var crc32 = function(u8){
+  var table = new Uint32Array([
+    0x00000000, 0x77073096, 0xee0e612c, 0x990951ba, 0x076dc419, 0x706af48f,
+    0xe963a535, 0x9e6495a3, 0x0edb8832, 0x79dcb8a4, 0xe0d5e91e, 0x97d2d988,
+    0x09b64c2b, 0x7eb17cbd, 0xe7b82d07, 0x90bf1d91, 0x1db71064, 0x6ab020f2,
+    0xf3b97148, 0x84be41de, 0x1adad47d, 0x6ddde4eb, 0xf4d4b551, 0x83d385c7,
+    0x136c9856, 0x646ba8c0, 0xfd62f97a, 0x8a65c9ec, 0x14015c4f, 0x63066cd9,
+    0xfa0f3d63, 0x8d080df5, 0x3b6e20c8, 0x4c69105e, 0xd56041e4, 0xa2677172,
+    0x3c03e4d1, 0x4b04d447, 0xd20d85fd, 0xa50ab56b, 0x35b5a8fa, 0x42b2986c,
+    0xdbbbc9d6, 0xacbcf940, 0x32d86ce3, 0x45df5c75, 0xdcd60dcf, 0xabd13d59,
+    0x26d930ac, 0x51de003a, 0xc8d75180, 0xbfd06116, 0x21b4f4b5, 0x56b3c423,
+    0xcfba9599, 0xb8bda50f, 0x2802b89e, 0x5f058808, 0xc60cd9b2, 0xb10be924,
+    0x2f6f7c87, 0x58684c11, 0xc1611dab, 0xb6662d3d, 0x76dc4190, 0x01db7106,
+    0x98d220bc, 0xefd5102a, 0x71b18589, 0x06b6b51f, 0x9fbfe4a5, 0xe8b8d433,
+    0x7807c9a2, 0x0f00f934, 0x9609a88e, 0xe10e9818, 0x7f6a0dbb, 0x086d3d2d,
+    0x91646c97, 0xe6635c01, 0x6b6b51f4, 0x1c6c6162, 0x856530d8, 0xf262004e,
+    0x6c0695ed, 0x1b01a57b, 0x8208f4c1, 0xf50fc457, 0x65b0d9c6, 0x12b7e950,
+    0x8bbeb8ea, 0xfcb9887c, 0x62dd1ddf, 0x15da2d49, 0x8cd37cf3, 0xfbd44c65,
+    0x4db26158, 0x3ab551ce, 0xa3bc0074, 0xd4bb30e2, 0x4adfa541, 0x3dd895d7,
+    0xa4d1c46d, 0xd3d6f4fb, 0x4369e96a, 0x346ed9fc, 0xad678846, 0xda60b8d0,
+    0x44042d73, 0x33031de5, 0xaa0a4c5f, 0xdd0d7cc9, 0x5005713c, 0x270241aa,
+    0xbe0b1010, 0xc90c2086, 0x5768b525, 0x206f85b3, 0xb966d409, 0xce61e49f,
+    0x5edef90e, 0x29d9c998, 0xb0d09822, 0xc7d7a8b4, 0x59b33d17, 0x2eb40d81,
+    0xb7bd5c3b, 0xc0ba6cad, 0xedb88320, 0x9abfb3b6, 0x03b6e20c, 0x74b1d29a,
+    0xead54739, 0x9dd277af, 0x04db2615, 0x73dc1683, 0xe3630b12, 0x94643b84,
+    0x0d6d6a3e, 0x7a6a5aa8, 0xe40ecf0b, 0x9309ff9d, 0x0a00ae27, 0x7d079eb1,
+    0xf00f9344, 0x8708a3d2, 0x1e01f268, 0x6906c2fe, 0xf762575d, 0x806567cb,
+    0x196c3671, 0x6e6b06e7, 0xfed41b76, 0x89d32be0, 0x10da7a5a, 0x67dd4acc,
+    0xf9b9df6f, 0x8ebeeff9, 0x17b7be43, 0x60b08ed5, 0xd6d6a3e8, 0xa1d1937e,
+    0x38d8c2c4, 0x4fdff252, 0xd1bb67f1, 0xa6bc5767, 0x3fb506dd, 0x48b2364b,
+    0xd80d2bda, 0xaf0a1b4c, 0x36034af6, 0x41047a60, 0xdf60efc3, 0xa867df55,
+    0x316e8eef, 0x4669be79, 0xcb61b38c, 0xbc66831a, 0x256fd2a0, 0x5268e236,
+    0xcc0c7795, 0xbb0b4703, 0x220216b9, 0x5505262f, 0xc5ba3bbe, 0xb2bd0b28,
+    0x2bb45a92, 0x5cb36a04, 0xc2d7ffa7, 0xb5d0cf31, 0x2cd99e8b, 0x5bdeae1d,
+    0x9b64c2b0, 0xec63f226, 0x756aa39c, 0x026d930a, 0x9c0906a9, 0xeb0e363f,
+    0x72076785, 0x05005713, 0x95bf4a82, 0xe2b87a14, 0x7bb12bae, 0x0cb61b38,
+    0x92d28e9b, 0xe5d5be0d, 0x7cdcefb7, 0x0bdbdf21, 0x86d3d2d4, 0xf1d4e242,
+    0x68ddb3f8, 0x1fda836e, 0x81be16cd, 0xf6b9265b, 0x6fb077e1, 0x18b74777,
+    0x88085ae6, 0xff0f6a70, 0x66063bca, 0x11010b5c, 0x8f659eff, 0xf862ae69,
+    0x616bffd3, 0x166ccf45, 0xa00ae278, 0xd70dd2ee, 0x4e048354, 0x3903b3c2,
+    0xa7672661, 0xd06016f7, 0x4969474d, 0x3e6e77db, 0xaed16a4a, 0xd9d65adc,
+    0x40df0b66, 0x37d83bf0, 0xa9bcae53, 0xdebb9ec5, 0x47b2cf7f, 0x30b5ffe9,
+    0xbdbdf21c, 0xcabac28a, 0x53b39330, 0x24b4a3a6, 0xbad03605, 0xcdd70693,
+    0x54de5729, 0x23d967bf, 0xb3667a2e, 0xc4614ab8, 0x5d681b02, 0x2a6f2b94,
+    0xb40bbe37, 0xc30c8ea1, 0x5a05df1b, 0x2d02ef8d
+  ])
+
+  var crc = 0 ^ (-1)
+
+  for(var i = 0; i < u8.length; i++){
+    crc = (crc >>> 8) ^ table[(crc ^ u8[i]) & 0xFF]
+  }
+
+  //return (crc ^ (-1)) // signed
+  return (crc ^ (-1)) >>> 0
+}
+
+var signature = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10])
+var te, td
+
+var decode = function(buf, err){
+  var u8a = new Uint8Array(buf)
+  var dv = new DataView(buf)
+  td = td || new TextDecoder('utf-8')
+  err = err || function(msg){ throw new Error(msg) }
+
+  var out = []
+  var pos = 0
+
+  if (u8a.length < signature.length) return err("not a valid png")
+  for (var i=0; i<signature.length; i++){
+    if (signature[i] !== u8a[i]) return err("not a valid png")
+    pos += 1
+  }
+
+  var done = false
+  while (!done){
+    var chunk = {}
+
+    if (pos + 4 > u8a.length) return err("unexpected end of file")
+    chunk.length = dv.getInt32(pos, false)
+    pos += 4
+
+    if (pos + 4 > u8a.length) return err("unexpected end of file")
+    chunk.type = td.decode(new DataView(buf, pos, 4))
+    pos += 4
+
+    if (chunk.length){
+      if (pos + chunk.length > u8a.length) return err('unexpected end of file')
+      chunk.data = new Uint8Array(buf, pos, chunk.length)
+      pos += chunk.length
+    }
+
+    if (pos + 4 > u8a.length) return err("unexpected end of file")
+    //chunk.crc = new Uint8Array(buf, pos, 4)
+    chunk.crc = dv.getUint32(pos, false)
+    pos += 4
+   
+
+    out.push(chunk)
+    //done = true
+    //console.log(pos.length, u8a.length)
+    if (pos === u8a.length) done = true
+  }
+
+
+  return out
+}
+
+var encode = function(chunks){
+  te = te || new TextEncoder('utf-8')
+
+  var size = 8 // inital png signature
+  for (var i=0, c; c=chunks[i]; i++){
+    size += 4 // length
+    size += 4 // type
+    size += c.length // data
+    size += 4 // crc32 
+  }
+
+  var buf = new ArrayBuffer(size)
+  var u8 = new Uint8Array(buf)
+  var dv = new DataView(buf)
+  var pos = 0
+
+  u8.set(signature, 0)
+  pos += 8
+
+  for (var i=0, c; c=chunks[i]; i++){
+    dv.setInt32(pos, c.length, false) // length
+    pos += 4
+    var chunk_type_u8 = te.encode(c.type) // type
+    u8.set(chunk_type_u8, pos)
+    pos += 4
+    if (c.length){
+      u8.set(c.data, pos) // data
+      pos += c.length
+    }
+    //u8.set(c.crc, pos) // crc32
+    dv.setUint32(pos, c.crc, false) // crc32
+    pos += 4
+  }
+
+  return u8
+}
+
+
+var make_itxt_chunk = function(keyword, txt){
+  te = te || new TextEncoder('utf-8')
+  var keyword_u8 = te.encode(keyword)
+  var txt_u8 = te.encode(txt)
+  var header_u8 = new Uint8Array(keyword_u8.length + 5)
+  header_u8.set(keyword_u8, 0)
+  // header has keyword, then a null byte and some additional fields
+  // see http://www.w3.org/TR/PNG/#11iTXt
+  var chunk = {type: 'iTXt'}
+  chunk.length = header_u8.length + txt_u8.length
+  var u8 = new Uint8Array(4 + chunk.length)
+  // put type and data on the same u8 array so we can calculate crc
+  u8.set(te.encode(chunk.type), 0)
+  u8.set(header_u8, 4)
+  u8.set(txt_u8, header_u8.length + 4)
+  chunk.crc = crc32(u8)
+  chunk.data = new Uint8Array(u8.buffer, 4)
+  return chunk
+}
+
+var read_cstring = function(u8, pos){
+  var str = ""
+  while (pos < u8.length){
+    if (u8[pos] === 0) return str
+    str += String.fromCharCode(u8[pos])
+    pos++
+  } 
+}
+
+var decode_itxt_chunk = function(chunk){
+  td = td || new TextDecoder('utf-8')
+  var data = {}
+  var pos = 0
+  data.keyword = read_cstring(chunk.data, 0)
+  pos += data.keyword.length + 1
+  data.compression = chunk.data[pos]
+  pos += 1
+  data.compression_method = chunk.data[pos]
+  pos += 1
+  data.language = read_cstring(chunk.data, pos)
+  pos += data.language.length + 1
+  data.translated_keyword = read_cstring(chunk.data, pos)
+  pos += data.translated_keyword.length + 1
+  var data_u8 = chunk.data.subarray(pos)
+  data.data = td.decode(data_u8)
+  return data
+}
+
+var canvas_to_blob_with_colorcode = function(canvas, cc){
+  var u8 = dataUriToUint8Array(canvas.toDataURL())
+  var chunks = decode(u8.buffer)
+  var itxt_chunk = make_itxt_chunk('colorcode', cc)
+  // assume we wanna insert the chunk very last, just in front of the end
+  chunks.splice(chunks.length - 1, 0, itxt_chunk)
+  var blob = new Blob([encode(chunks)], {type: 'image/png'})
+  return blob
+}
+
+var exports = {}
+exports.crc32 = crc32
+exports.decode = decode
+exports.encode = encode
+exports.make_itxt_chunk = make_itxt_chunk
+exports.decode_itxt_chunk = decode_itxt_chunk
+exports.canvas_to_blob_with_colorcode = canvas_to_blob_with_colorcode
+return exports
+
+})()
diff --git a/js/upload.js b/js/upload.js
index 28863fa..c1ef7f7 100644
--- a/js/upload.js
+++ b/js/upload.js
@@ -3,14 +3,11 @@ var upload = (function(){
   var button = document.getElementById("upload_button")
   var uploading = false
   
-  function upload(uri, filename, tag){
+  function upload(blob, filename, tag){
     if (uploading) return
     filename = filename || get_filename()
-    uri = (uri && ! uri.target) ? uri : lastGif
     tag = tag || "shader"
 
-    var blob = dataUriToBlob(uri)
-    
     button.innerHTML = "uploading..."
     button.className = "uploading"
     
diff --git a/js/vendor/dataUriToBlob.js b/js/vendor/dataUriToBlob.js
index b45801c..80189b8 100644
--- a/js/vendor/dataUriToBlob.js
+++ b/js/vendor/dataUriToBlob.js
@@ -1,3 +1,14 @@
+var dataUriToUint8Array = function(uri){
+  var data = uri.split(',')[1];
+  var bytes = atob(data);
+  var buf = new ArrayBuffer(bytes.length);
+  var u8 = new Uint8Array(buf);
+  for (var i = 0; i < bytes.length; i++) {
+    u8[i] = bytes.charCodeAt(i);
+  }
+  return u8 
+}
+
 window.dataUriToBlob = (function(){
 /**
  * Blob constructor.
@@ -44,4 +55,4 @@ function mime(uri) {
 
 return dataUriToBlob;
 
-})()
\ No newline at end of file
+})()