diff options
| author | Jules Laplace <jules@okfoc.us> | 2015-03-19 15:40:02 -0400 |
|---|---|---|
| committer | Jules Laplace <jules@okfoc.us> | 2015-03-19 15:40:02 -0400 |
| commit | 0619f4fde7d265bf1affe3d56e185fd682d76c8c (patch) | |
| tree | 0c114d2ecbe3eb28477214f96e8373fcd9669cbe | |
| parent | 33605bd8d7cdaaa97e97f1891b655848c0f4763b (diff) | |
change palette for color quant
| -rw-r--r-- | image.html | 39 | ||||
| -rw-r--r-- | js/color_code.js | 14 |
2 files changed, 40 insertions, 13 deletions
@@ -1,16 +1,26 @@ +<style> +label { min-width: 40px; display: inline-block; } +</style> <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> -<input type="text" id="text_style"> + <div> + <input type="text" id="url_el" placeholder="enter a url"> + <br> + <label for="width_el">width</label> <input type="range" min="1" max="120" value="40" id="width_el"> + <span id="width_span"></span>x<span id="height_span"></span> + </br> + <label for="ratio_el">ratio</label> <input type="range" min="0.0" max="8" value="2" step="0.005" id="ratio_el"> + <label for="nn_el">nearest neighbor</label> <input type="checkbox" checked id="nn_el"> + <label for="palette_el">palette</label> + <select id="palette_el"> + <option default value="colors">all colors</label> + <option value="hues">hues only</label> + <option value="grays">grayscale</label> + </select> + </div> + <div id="image_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> @@ -31,7 +41,12 @@ url_el.addEventListener('change', function(){ }) nn_el.addEventListener('change', function(){ nn = $(nn_el).prop('checked') - MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn }) + MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn }) +}) +palette_el.addEventListener('change', function(){ + var palette = $(palette_el).val() + MircColor.set_colors( MircColor[palette] ) + MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn }) }) ratio_el.addEventListener("input", function(){ ratio = parseFloat( ratio_el.value ) diff --git a/js/color_code.js b/js/color_code.js index c8e8b84..fde398f 100644 --- a/js/color_code.js +++ b/js/color_code.js @@ -54,8 +54,18 @@ var MircColor = (function(){ [127,127,127], [210,210,210] ] + + var colors = COLORS, recolor_fn = null + function set_colors (a) { + colors = a + } + function set_recolor_fn (fn) { + recolor_fn = fn + } + function closest_to(pixel){ - return COLORS.reduce(function(prev, curr, index) { + recolor_fn && recolor_fn(pixel) + return colors.reduce(function(prev, curr, index) { var d = distance(pixel, curr) if (prev[0] > d) { prev[0] = d @@ -175,6 +185,8 @@ var MircColor = (function(){ colors: COLORS, hues: HUES, grays: GRAYS, + set_recolor_fn: set_recolor_fn, + set_colors: set_colors, closest_to: closest_to, distance: distance, fromUrl: fromUrl, |