forked from gruppe-adler/grad_aff_wasm
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (74 loc) · 10.5 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
<!DOCTYPE html>
<!-- malloc_copy.html -->
<html>
<head></head>
<body>
<script type="module">
import init from "/index.js";
const imageData = new ImageData(64, 64);
for (let x = 0; x < imageData.width; x++) {
const quadrants = (x / imageData.width > 0.5) ? [1, 4] : [2, 3];
for (let y = 0; y < imageData.height; y++) {
const base = y * (imageData.width * 4) + x * 4;
const quadrant = quadrants[(y / imageData.height < 0.5) ? 0 : 1];
let [r, g, b] = [255, 0, 0];
switch (quadrant) {
case 1:
[r, g, b] = [255, 0, 0];
break;
case 2:
[r, g, b] = [0, 255, 0];
break;
case 3:
[r, g, b] = [0, 0, 255];
break;
case 4:
[r, g, b] = [0, 0, 0];
break;
}
imageData.data[base] = r;
imageData.data[base + 1] = g;
imageData.data[base + 2] = b;
imageData.data[base + 3] = 255;
}
}
draw(imageData);
(async () => {
const grad_aff = await init('/grad_aff_paa.wasm');
const arr = grad_aff.encode(imageData);
const blob = new Blob([arr]);
download({ blob, name: 'test.paa' });
const paa_file = 'application/octet-stream;base64,Bf9HR0FUQ0dWQQQAAAAAGDBZR0dBVENYQU0EAAAA/////0dHQVRHQUxGBAAAAAH///9HR0FUU0ZGT0AAAACAAAAAhxAAAI4UAACVFQAA3BUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAEAAABAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAA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AAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAACAAIAAABAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAgNtm3btm38AAAAAAAAAAD6/7Zt27adpAAAAAAAAAAAAAUAAAAA8P8AAAAAAAAAAPr/tm3btp0mAAAAAAAAAAAABQAAAADw/wAAAAAAAAAAAAUAAAAA8P8AAAAAAAAAAPr/tm3btt0kAAAAAAAAAAAIDbZt27b9wwAAAAAAAAAA/wAJlIAJmIByAgAA1RUVFX/eSQIAAAAAWQOlAFWqqqqA920LAAAAMHICAAD/AABw/4DbliRJAgByAgAA/wAAVYDeSQIAAPD/cgIAAP8AAFWA+G0LAAAQAlICAAD/AAANgN5JAgAAAABZA6UAVaqqqv8AQkIkREIkcgIAAFdUVFT/AAmYgAmYgLwDAACVlZWVf7gAAAAABiAXAykBqqrqav+AFyY9cIIkcwIhANYlCQF/z0kCAAAAADgD5wBVqqqqgM9JAgAAAAA4A+cAVaqqqvyAA55IyZFEUgIhAJdQQEDNgEnyJEyCJHICpQAAAAMBCIA5nMM5nMO8AwAAVlZWVv8ACZiACZiAvAMAAJWVlZW0gEmQhEmSJHICKQFAgAAA/39IAifSc2FzAiEAAQkl1n/OAAAAAJAkOAPnAKqqqlWAzgAAAACQJDgD5wCqqqpV/IBJlByJMOByAiEAQEBQl82ASMIkT5IkcgKlAAEDAAAIgDmcwzmcw7wDAABWVlZW/wAJmIAJmEByAgAAFRUV1YDeAAAAAJAkWgOlAKqqqlV/9wADAADQtnICAABwAAD/gN7/DwAAkCRSAgAAVQAA/4De/w8AAJAkcgIAAFUAAP+A+SEAAADQtlICAAANAAD/gN4AAAAAkCRaA6UAqqqqVf8AREIkRCIkcgIAAFRUVFcIDcZv27Zt2wAAAAAAAAAA+v9Jatu2bdsAAAAAAAAAAAAF/w8AAAAAAAAAAAAAAAD6/01i27Zt2wAAAAAAAAAAAAX/DwAAAAAAAAAAAAAAAAAF/w8AAAAAAAAAAAAAAAAABf8PAAAAAAAAAAAAAAAACA0/bNu2bdsAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAEAAQAAABADI3tm3btm0AAAAAAAAAAAAyN7Zt27YNAAAAAAAAAAAAMje2bdu2DQAAAAAAAAAAADI3tm3btg3AAAAAAAAAAAB/+w7pAA7gAHsDAAD1paWl4n/bFrdbiyRSAmMA/6ivAdaAklQ65JQEOAPnAFW/X2qA+2QMxEAMxHsDAABfWlpagPoO4AAO4JCbAwAApaWl9eJ/SLK1cbttUgJjAAGvqP/WgElATqQjSXICQgDA+ir/gPtADMRATMZ7AwAAWlpaXzI3BmDbtm3bAAAAAAAAAAAyNwBg27Zt2wAAAAAAAAAAMjcAYNu2bdsAAAAAAAAAADI3AGzbtm3bAAAAAAAAAAAIAAgAQAAAxABJkiSRkGEwAgAAVVWpMQfCtg3ASdzQMAIAAFVVakzDABkUCUmSJDACAAAxqVVVB8INncQAbNswAgAATGpVVQQABAAQAAC1urZtwAZs2/4DAABVfX1VAAAAAAAA';
const paaBytes = convertDataURIToBinary(paa_file);
const image = grad_aff.decode(paaBytes);
draw(image);
})();
function draw (imageData) {
const canvas = document.createElement('canvas');
document.body.append(canvas);
canvas.width = imageData.width;
canvas.height = imageData.height;
const ctx = canvas.getContext('2d');
ctx.putImageData(imageData, 0, 0);
}
const BASE64_MARKER = ';base64,';
function convertDataURIToBinary(dataURI) {
const base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
const raw = window.atob(dataURI.substring(base64Index));
return Uint8Array.from(raw.split('').map( x => x.charCodeAt(0) ));
}
function download (file) {
const url = URL.createObjectURL(file.blob);
const link = document.createElement('a');
link.download = file.name;
link.href = url;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
link.remove();
// we revoke the url only after a delay because old Edge can't handle it otherwise
window.setTimeout(() => URL.revokeObjectURL(url), 200);
}
</script>
</body>
</html>