adding hsl functions to image.html

1 files changed, 66 insertions, 30 deletions

diff --git a/js/color_code.js b/js/color_code.js
index 7c5f236..c27f2bb 100644
--- a/js/color_code.js
+++ b/js/color_code.js
@@ -72,6 +72,24 @@ var MircColor = (function(){
     null,
     null,
   ]  
+  var YELLOWS = [
+    [255,255,255],
+    [0,0,0],
+    null,
+    [0,147,0],
+    null,
+    null,
+    null,
+    [252,127,0],
+    [255,255,0],
+    [0,252,0],
+    null,
+    [0,255,255],
+    null,
+    null,
+    null,
+    null,
+  ]
   var BLUES = [
     [255,255,255],
     [0,0,0],
@@ -91,6 +109,8 @@ var MircColor = (function(){
     null,
   ]
   var colors = COLORS, recolor_fn = null
+  var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d'), pixels
+
   function set_colors (a) {
     colors = a
   }
@@ -99,7 +119,9 @@ var MircColor = (function(){
   }
   
   function closest_to(pixel){
-    recolor_fn && recolor_fn(pixel)
+    if (recolor_fn) {
+      pixel = recolor_fn(pixel)
+    }
     return colors.reduce(function(prev, curr, index) {
       var d = distance(pixel, curr)
       if (prev[0] > d) {
@@ -139,12 +161,22 @@ var MircColor = (function(){
     else cb (rows)
   }
 
+  function getNaturalDimensions (img) {
+    if (img.naturalWidth) {
+      return { naturalWidth: img.naturalWidth, naturalHeight: img.naturalHeight }
+    }
+    if (img.videoWidth) {
+      return { naturalWidth: img.videoWidth, naturalHeight: img.videoHeight }
+    }
+    return { naturalWidth: img.width, naturalHeight: img.height }
+  }
   function neighbor (canvas, ctx, img) {
+    var dims = getNaturalDimensions(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)
+    scratch.width = dims.naturalWidth
+    scratch.height = dims.naturalHeight
+    scratchCtx.drawImage(img, 0, 0, dims.naturalWidth, dims.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
@@ -162,43 +194,45 @@ var MircColor = (function(){
         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'), 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
-      }
-      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)
+      fromCanvas(img, cb, opt)
     }
     if (img.src == url) { return img.onload() }
     img.src = url
     if (img.complete) { return img.onload() }
   }
+  function fromCanvas (img, cb, opt) {
+    var dims = getNaturalDimensions(img)
+    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 = (dims.naturalHeight * width / dims.naturalWidth) / 2
+      }
+    }
+    else {
+      canvas.width = dims.naturalWidth * 2
+      canvas.height = dims.naturalHeight
+    }
+    if (opt.neighbor) {
+      pixels = neighbor(canvas, ctx, img)
+    }
+    else {
+      ctx.drawImage(img,0,0,dims.naturalWidth,dims.naturalHeight,0,0,canvas.width,canvas.height)
+      pixels = ctx.getImageData(0,0,canvas.width,canvas.height)
+    }
+    fromImageData(pixels, cb)
+  }
   function ascii (rows) {
     var lines = rows.map(function(str){
-      return str.map(function(index){ return "\\x03," + index + " " }).join("")
+      return str.map(function(index){ return "\\x031," + index + " " }).join("")
     }).join("\\n")
     var txt = '/exec -out printf "' + lines + '"\n'
     return txt
@@ -211,7 +245,7 @@ var MircColor = (function(){
   function stringFromUrl (url, cb, opt) {
     fromUrl(url, function(rows){
       cb(rows.map(function(str){
-        return str.map(function(index){ return "\C-c," + index + " " }).join("")
+        return str.map(function(index){ return "\C-c1," + index + " " }).join("")
       }).join("\n"))
     }, width)
   }
@@ -221,12 +255,14 @@ var MircColor = (function(){
     hues: HUES,
     grays: GRAYS,
     reds: REDS,
+    yellows: YELLOWS,
     blues: BLUES,
     set_recolor_fn: set_recolor_fn,
     set_colors: set_colors,
     closest_to: closest_to,
     distance: distance,
     fromUrl: fromUrl,
+    fromCanvas: fromCanvas,
     fromImageData: fromImageData,
     stringFromUrl: stringFromUrl,
     asciiFromUrl: asciiFromUrl,