colorcode stuff??

author: Jules <jules@asdf.us> 2014-11-29 00:55:52 -0500
committer: Jules <jules@asdf.us> 2014-11-29 00:55:52 -0500
commit: 9f0938e98e329d26f06714a1e4937a4ec7e862ba (patch)
tree: ee9edcc78616f1a48f7cf3cf48ba2c96d4f9a50b
parent: cebe1340f8c83bfceaca01fae923bc7d5fb2bff3 (diff)
2 files changed, 85 insertions, 23 deletions
diff --git a/image.html b/image.html
index 5729d60..0ddae0a 100644
--- a/image.html
+++ b/image.html
@@ -1,23 +1,47 @@
 <body>
 <div>
 <input type="text" id="url_el" placeholder="enter a url">
+<br>
 width <input type="range" min="1" max="120" value="40" id="width_el">
 <span id="width_span"></span>x<span id="height_span"></span>
+</br>
+ratio <input type="range" min="0.0" max="8" value="2" step="0.005" id="ratio_el">
+nearest neighbor <input type="checkbox" checked id="nn_el">
 </div>
 <div id="image_style"></div>
-<div id="text_style"></div>
+<input type="text" id="text_style">
 </body>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="js/color_code.js"></script>
 <script>
+var basehref_partz = window.location.href.split("/")
+basehref_partz.pop()
+var basehref = basehref_partz.join("/")
 var url = 'img/rainwagon.gif'
 var width = parseInt( width_span.innerHTML = width_el.value )
+var ratio = parseFloat( ratio_el.value )
+var nn = $(nn_el).prop('checked')
 var width_timeout
-MircColor.fromUrl(url, toCanvas, width)
+MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn })
 
 url_el.addEventListener('change', function(){
+  ratio_el.value = ratio = 0
   url = "/cgi-bin/proxy?" + url_el.value
-  MircColor.fromUrl("/cgi-bin/proxy?" + url, toCanvas, width)
+  MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn })
+})
+nn_el.addEventListener('change', function(){
+  nn = $(nn_el).prop('checked')
+    MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn })
+})
+ratio_el.addEventListener("input", function(){
+  ratio = parseFloat( ratio_el.value )
+  if (ratio < 0.03) ratio = 0
+  width_span.innerHTML = width
+  height_span.innerHTML = "..."
+  clearTimeout( width_timeout )
+  width_timeout = setTimeout(function(){
+    MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn })
+  }, 50)
 })
 width_el.addEventListener("input", function(){
   width = parseInt( width_el.value )
@@ -25,26 +49,25 @@ width_el.addEventListener("input", function(){
   height_span.innerHTML = "..."
   clearTimeout( width_timeout )
   width_timeout = setTimeout(function(){
-    MircColor.fromUrl(url, toCanvas, width)
-  }, 300)
+    MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn })
+  }, 50)
 })
 function toCanvas(rows){
-  var px = 8
+  var wpx = 6, hpx = 12
   var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d')
   var rgb_colors = MircColor.colors.map(function(c){ return "rgb(" + c + ")" })
-  canvas.width = rows[0].length * px
-  canvas.height = rows.length * px
+  canvas.width = rows[0].length * wpx
+  canvas.height = rows.length * hpx
   rows.forEach(function(row, j){
     row.forEach(function(lex, i){
       ctx.fillStyle = rgb_colors[lex]
-      ctx.fillRect(i*px,j*px,px,px)
+      ctx.fillRect(i*wpx,j*hpx,wpx,hpx)
     })
   })
   height_span.innerHTML = rows.length
   image_style.innerHTML = ""
   image_style.appendChild(canvas)
-  var span = document.createElement('span')
-  text_style.innerHTML = MircColor.ascii(rows)
+  text_style.value = MircColor.ascii(rows)
 }
 
 </script>
diff --git a/js/color_code.js b/js/color_code.js
index f16e91c..55a284f 100644
--- a/js/color_code.js
+++ b/js/color_code.js
@@ -42,7 +42,6 @@ var MircColor = (function(){
         pixel = new Array (4),
         data = pixels.data,
         t
-        console.log(pixels)
     for (var i = 0, h = pixels.height; i < h; i++) {
       var row = []
       rows.push(row)
@@ -55,27 +54,66 @@ var MircColor = (function(){
         row[j] = closest_to(pixel)
       }
     }
-    console.log(rows)
     if (! cb) return rows
     else cb (rows)
   }
-  function fromUrl (url, cb, width) {
-    var img = new Image ()
+
+  function neighbor (canvas, ctx, img) {
+    var scratch = document.createElement("canvas")
+    var scratchCtx = scratch.getContext('2d')
+    scratch.width = img.naturalWidth
+    scratch.height = img.naturalHeight
+    scratchCtx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight)
+    var srcImageData = scratchCtx.getImageData(0,0,scratch.width,scratch.height)
+    var destImageData = ctx.createImageData(canvas.width,canvas.height)
+    var src = srcImageData.data, dest = destImageData.data
+    var dt, dw = destImageData.width, dh = destImageData.height
+    var st, sw = srcImageData.width, sh = srcImageData.height
+    for (var i = 0; i < dh; i++) {
+      for (var j = 0; j < dw; j++) {
+        var y = i * sh/dh
+        var x = j * sw/dw
+        dt = ((i*dw) + j) * 4
+        st = Math.floor( Math.floor(y)*sw + x ) * 4
+        dest[dt] = src[st]
+        dest[dt+1] = src[st+1]
+        dest[dt+2] = src[st+2]
+        dest[dt+3] = src[st+3]
+      }
+    }
+
+    return destImageData
+  }
+  var img = new Image ()
+  function fromUrl (url, cb, opt) {
     img.onload = function(){
-      var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d')
-      if (width) {
-        canvas.width = width
-        canvas.height = img.naturalHeight * width / img.naturalWidth / 2
+      var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d'), pixels
+      if (opt.width) {
+        canvas.width = opt.width
+        if (opt.height) {
+          canvas.height = opt.height
+        } else if (opt.ratio) {
+          canvas.height = opt.width / opt.ratio
+        } else {
+          canvas.height = (img.naturalHeight * width / img.naturalWidth) / 2
+        }
       }
       else {
         canvas.width = img.naturalWidth * 2
         canvas.height = img.naturalHeight
       }
-      ctx.drawImage(img,0,0,img.naturalWidth,img.naturalHeight,0,0,canvas.width,canvas.height)
-      var pixels = ctx.getImageData(0,0,canvas.width,canvas.height)
+      if (opt.neighbor) {
+        pixels = neighbor(canvas, ctx, img)
+      }
+      else {
+        ctx.drawImage(img,0,0,img.naturalWidth,img.naturalHeight,0,0,canvas.width,canvas.height)
+        pixels = ctx.getImageData(0,0,canvas.width,canvas.height)
+      }
       fromImageData(pixels, cb)
     }
+    if (img.src == url) { return img.onload() }
     img.src = url
+    if (img.complete) { return img.onload() }
   }
   function ascii (rows) {
     var lines = rows.map(function(str){
@@ -84,12 +122,12 @@ var MircColor = (function(){
     var txt = '/exec -out printf "' + lines + '"\n'
     return txt
   }
-  function asciiFromUrl (url, cb, width) {
+  function asciiFromUrl (url, cb, opt) {
     fromUrl(url, function(rows){
       cb(ascii(rows), rows)
     }, width)
   }
-  function stringFromUrl (url, cb, width) {
+  function stringFromUrl (url, cb, opt) {
     fromUrl(url, function(rows){
       cb(rows.map(function(str){
         return str.map(function(index){ return "\C-c" + index + "," + index + "x\C-c" }).join("")
@@ -106,6 +144,7 @@ var MircColor = (function(){
     stringFromUrl: stringFromUrl,
     asciiFromUrl: asciiFromUrl,
     ascii: ascii,
+    neighbor: neighbor,
   }
 
 })()
author	Jules <jules@asdf.us>	2014-11-29 00:55:52 -0500
committer	Jules <jules@asdf.us>	2014-11-29 00:55:52 -0500
commit	9f0938e98e329d26f06714a1e4937a4ec7e862ba (patch)
tree	ee9edcc78616f1a48f7cf3cf48ba2c96d4f9a50b
parent	cebe1340f8c83bfceaca01fae923bc7d5fb2bff3 (diff)