diff options
| -rw-r--r-- | image.html | 45 | ||||
| -rw-r--r-- | js/color_code.js | 63 |
2 files changed, 85 insertions, 23 deletions
@@ -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, } })() |