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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>storing irc colorcodes as image/png metadata</title>
<script src="js/vendor/dataUriToBlob.js"></script>
<script src="js/vendor/FileSaver.js"></script>
<script src="js/png.js"></script>
</head>
<body>
<div id=content>
load file: <input id=in_file type=file><br>
or url: <input id=in_url type=text>
<button id=but_load>load</button><br><br>
<div id=log></div>
</div>
</body>
<script>
var dom = {}
var doms = "in_url in_file but_load log".split(' ')
for (var i=0, name; name=doms[i]; i++){
dom[name] = document.getElementById(name)
}
var log_clear = function(){
dom.log.innerHTML = ""
}
var log = function(txt){
var html = dom.log.innerHTML + txt + "<br>"
dom.log.innerHTML = html
}
var process_png = function(name, buf){
log("reading " + name)
var start = Date.now()
var chunks = PNG.decode(buf, log)
if (!chunks) return;
var total = Date.now() - start
log("took " + total + "ms to decode chunks")
var chunk_txt = ""
var itxt_chunks = []
for (var i=0, c; c=chunks[i]; i++){
chunk_txt += " " + c.type
if (c.type === 'iTXt') itxt_chunks.push(c)
}
log("found chunks: " + chunk_txt)
if (!itxt_chunks.length){
log("no iTXt chunks found")
return
}
var cc_chunks = []
var start = Date.now()
for (var i=0, c; c=itxt_chunks[i]; i++){
var itxt = PNG.decode_itxt_chunk(c)
if (itxt.keyword && itxt.keyword === 'colorcode')
cc_chunks.push(itxt)
}
var total = Date.now() - start
if (!cc_chunks.length){
log("no colorcodes found")
return
}
log("took " + total + "ms to decode iTXt chunks")
for (var i=0, c; c=cc_chunks[i]; i++){
log("found colorcode")
var ta = document.createElement('textarea')
ta.style.width = '500px'
ta.style.height = '300px'
ta.value = c.data
dom.log.appendChild(ta)
}
}
dom.in_file.value = ""
dom.in_file.addEventListener('change', function(){
log_clear()
var file = this.files[0]
var r = new FileReader()
r.addEventListener('load', function(){
process_png(file.name, r.result)
})
r.readAsArrayBuffer(file)
})
dom.but_load.addEventListener('click', function(){
log_clear()
var url = "/cgi-bin/proxy?" + dom.in_url.value
// var url = "http://198.199.72.134/cors/" + dom.in_url.value
var xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'arraybuffer'
xhr.addEventListener('load', function(){
process_png(url, xhr.response)
})
xhr.send()
})
</script>
</html>
|
