1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<style>
label { min-width: 40px; display: inline-block; }
</style>
<body>
<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>
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: width, ratio: ratio, neighbor: nn })
url_el.addEventListener('change', function(){
ratio_el.value = ratio = 0
url = "/cgi-bin/proxy?" + url_el.value
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 })
})
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 )
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 )
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)
})
function toCanvas(rows){
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 * wpx
canvas.height = rows.length * hpx
rows.forEach(function(row, j){
row.forEach(function(lex, i){
ctx.fillStyle = rgb_colors[lex]
ctx.fillRect(i*wpx,j*hpx,wpx,hpx)
})
})
height_span.innerHTML = rows.length
image_style.innerHTML = ""
image_style.appendChild(canvas)
text_style.value = MircColor.ascii(rows)
}
</script>
|
