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
|
<body>
<div>
<input type="text" id="url_el" placeholder="enter a url">
width <input type="range" min="1" max="120" value="40" id="width_el">
<span id="width_span"></span>x<span id="height_span"></span>
</div>
<div id="image_style"></div>
<div id="text_style"></div>
</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 url = 'img/rainwagon.gif'
var width = parseInt( width_span.innerHTML = width_el.value )
var width_timeout
MircColor.fromUrl(url, toCanvas, width)
url_el.addEventListener('change', function(){
url = "/cgi-bin/proxy?" + url_el.value
MircColor.fromUrl("/cgi-bin/proxy?" + url, toCanvas, width)
})
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)
}, 300)
})
function toCanvas(rows){
var px = 8
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
rows.forEach(function(row, j){
row.forEach(function(lex, i){
ctx.fillStyle = rgb_colors[lex]
ctx.fillRect(i*px,j*px,px,px)
})
})
height_span.innerHTML = rows.length
image_style.innerHTML = ""
image_style.appendChild(canvas)
var span = document.createElement('span')
text_style.innerHTML = MircColor.ascii(rows)
}
</script>
|
