/
index.html
102 lines (93 loc) · 3.26 KB
/
index.html
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
<!doctype html>
<meta charset=utf-8>
<a href=//github.com/codegolf/zpng><img style="position:absolute;top:0;right:0;border:0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<html>
<head>
<title>zpng</title>
</head>
<body>
<style>
* { margin: 0; padding: 0 }
body { width: 500px; padding: 10px 0; margin: 0 auto; font-family: arial; text-align: center; }
h1 { font-size: 50px; line-height: 60px }
h2 { font-size: 25px; line-height: 30px }
h3 { font-size: 20px; line-height: 25px; }
textarea { width: 500px; height: 200px }
input { width: 50px }
i { font-size: 10px }
</style>
<h1>zpng</h1>
<br>
<b>A pure JS <a href="http://creativejs.com/2012/06/jsexe-javascript-compressor/">JsExe</a> clone</b>
<br>
<br>
<br>
<h3>Input (JS, ASCII)</h3>
<br>
<textarea id=a></textarea>
<br>
<br>
<b>Iterations</b> <input type=number id=it value=50>
<br>
<br>
<button id=compile>Compile</button>
<br>
<br>
<br>
<br>
<h3>Output</h3>
<br>
<br>
<b><a id=c download="js.png.html"></a></b>
<br>
<br>
<img id=b>
<br>
<br>
<span id=info></span>
<br>
<br>
<br>
<br>
<br>
<i>PS: Your JS code can reuse these shortcuts:
<br>
e (eval), V (a canvas), C (canvas context2d), X (canvas imageData), $ and _ (strings)</i>
<br>
<br>
<br>
2015 - the codegolf team <3
<br>
<script src="zopfli.zlib.min.js"></script>
<script src="crc.js"></script>
<script src="main.js"></script>
<script>
compile.onclick = function(){
var boot = "<canvas id=V><img src=# onload=C=V.getContext('2d');for($=_='';C.drawImage(this,$--,0),X=(q=C.getImageData(0,0,64,32)).data[0];_+=String.fromCharCode(X));(e=eval)(_)>";
var i;
var arr = [];
for(i in a.value){
arr.push(a.value.charCodeAt(i));
}
arr.push(0x00);
// Try all the filters
var binascii_none = generatePNG(arr, boot, { iterations: it.value || 50, filter: 'none' });
var binascii_sub = generatePNG(arr, boot, { iterations: it.value || 50, filter: 'sub' });
var binascii_up = generatePNG(arr, boot, { iterations: it.value || 50, filter: 'up' });
var binascii_average = generatePNG(arr, boot, { iterations: it.value || 50, filter: 'average' });
var binascii_paeth = generatePNG(arr, boot, { iterations: it.value || 50, filter: 'paeth' });
var binascii = binascii_none; info.innerHTML = "(filter: none; "
if(binascii_sub.length < binascii_none.length){ binascii = binascii_sub; info.innerHTML = "(filter: sub; " }
if(binascii_up.length < binascii_sub.length){ binascii = binascii_up; info.innerHTML = "(filter: up; " }
if(binascii_average.length < binascii_up.length){ binascii = binascii_average; info.innerHTML = "(filter: average; " }
if(binascii_paeth.length < binascii_average.length){ binascii = binascii_paeth; info.innerHTML = "(filter: paeth; " }
info.innerHTML += " input: " + a.value.length + "b; output: " + (binascii.length + boot.length) + "b)";
var dataUrl = 'data:text/html;base64,' + btoa(binascii);
b.src = dataUrl;
c.href = dataUrl;
c.innerHTML = "download";
}
a.value = "";
</script>
</body>
</html>