diff options
| 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 /image.html | |
| parent | cebe1340f8c83bfceaca01fae923bc7d5fb2bff3 (diff) | |
colorcode stuff??
Diffstat (limited to 'image.html')
| -rw-r--r-- | image.html | 45 |
1 files changed, 34 insertions, 11 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> |