-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
213 lines (183 loc) · 7.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body {
font-family: Arial;
font-weight: bold;
text-align: center;
}
#image-container {
margin-top: 20px;
margin-bottom: 20px;
}
/*
.slider {
width: 50%;
} */
</style>
</head>
<body>
<script src="lerc1dec.js"></script>
<h1>Lerc1 wasm decoder</h1>
<h2 id="demo"></h2>
<div id="image-container">
</div>
<label for="level">Level:</label>
<input type="number" id="Level" name="level" value="0" min="0" max="20">
<label for="row">Row:</label>
<input type="number" id="Row" name="row" value="0" min="0" max="0">
<label for="row">Column:</label>
<input type="number" id="Column" name="column" value="0" min="0" max="0">
<script>
let Lerc = Module;
Lerc.displayZone = {
canvas: undefined,
ctx: undefined,
imageData: undefined
};
function display(image) {
let width = image.width;
let height = image.height;
displayZone = Lerc.displayZone;
if (!displayZone.ctx) {
let canvas = document.createElement('canvas');
displayZone.canvas = canvas;
canvas.width = width;
canvas.height = height;
document.getElementById('image-container').appendChild(canvas);
let ctx = canvas.getContext('2d');
displayZone.ctx = ctx;
let imageData = ctx.createImageData(width, height);
displayZone.imageData = imageData;
}
if (displayZone.imageData.length != width * height * 4) { // Change the size?
}
let buffer = new Uint32Array(displayZone.imageData.data.buffer, 0, width * height);
let ALPHA = 0xff000000;
let scale = 255 / (image.max - image.min);
for (let i = 0; i < buffer.length; i++) {
let v = ((image.data[i] - image.min) * scale) & 0xff;
buffer[i] = (v * 0x10101) | ALPHA;
};
displayZone.ctx.putImageData(displayZone.imageData, 0, 0);
}
Lerc.onRuntimeInitialized = () => {
console.log("Started");
// buffer, size => json string or nullptr
Lerc.getwh = Lerc.cwrap('getwh', 'number', ['number', 'number']);
// buffer, size, ndv, outbuffer, outsize, message => true if no error
Lerc.lercDecode = Lerc.cwrap('decode', 'number', [
'number', 'number', 'number',
'number', 'number', 'number',
]);
// get Lerc blob info as a js Object, the first 100 bytes or less
Lerc.getInfo = function(data) {
if (data.length > 100)
data = data.slice(0, 100)
let wbuf = Lerc._malloc(data.length);
Lerc.writeArrayToMemory(data, wbuf);
cresult = Lerc.getwh(wbuf, data.length);
response = Lerc.UTF8ToString(cresult);
Lerc._free(cresult);
Lerc._free(wbuf);
return JSON.parse(response)
}
// decode the Lerc1 blob
// returned .data is an array view of decoded array on the wasm heap
// free by calling .clean() when done
Lerc.wasm_decode = function(data, ndv) {
image = this.getInfo(data.slice(0, 100));
if (!image) return image;
raw = this._malloc(data.length);
this.writeArrayToMemory(data, raw);
outsize = image.width * image.height * 4; // Always float32
bufptr = Lerc._malloc(outsize);
values = new Float32Array(Lerc.HEAP8.buffer, bufptr, outsize);
// Get a 1024 byte message buffer, remember to free it
message = Lerc._malloc(1024);
// Now for the decode
decoded = Lerc.lercDecode(raw, data.length, ndv, bufptr, outsize, message);
if (decoded) {
// image.data = new Float32Array(values); // copy
image.data = values; // reference
image.bufptr = bufptr;
image.clean = function() {
delete this.data;
Lerc._free(this.bufptr);
}
} else {
image.error = this.UTF8ToString(message);
this._free(bufptr);
console.log(image.error);
};
this._free(message);
this._free(raw);
return image;
}
// Full decode, returns a JS owned array and cleans up the wasm heap
Lerc.decode = function(data, ndv) {
image = this.wasm_decode(data, ndv);
values = new Float32Array(image.data); // make a copy
image.clean();
image.data = values;
delete image.clean;
return image;
}
// function refresh(e) {
// let level = document.getElementById('Level').value;
// let row = document.getElementById('Row').value;
// let column = document.getElementById('Column').value;
// console.log(`${level}/${row}/${column}`)
// }
document.getElementById("Level").addEventListener("input", refresh);
document.getElementById("Row").addEventListener("input", refresh);
document.getElementById("Column").addEventListener("input", refresh);
refresh();
}
async function refresh() {
try {
// Sample Lerc tile
let url = "https://services.arcgisonline.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer/"
let rowInput = document.getElementById('Row');
let columnInput = document.getElementById('Column');
let level = document.getElementById('Level').value;
let maxval = 2 ** level - 1;
if (rowInput.max != maxval)
rowInput.max = maxval;
if (columnInput.max != maxval)
columnInput.max = maxval;
let row = rowInput.value;
let column = columnInput.value;
url += "tile/" + level + "/" + row + "/" + column
let result = await fetch(url);
let data = await result.arrayBuffer();
data = new Uint8Array(data);
console.log(data.length);
image = Lerc.getInfo(data);
// If image.needs_ndv is true, Lerc.decode
// will needs to use the second parameter as no data value
console.log(image);
if (!image) throw new Error("Can't recognize Lerc1 header");
image = Lerc.decode(data);
// Prove it
vmin = vmax = image.data[0]
for (i = 0; i < image.data.length; i++) {
if (vmin > image.data[i])
vmin = image.data[i];
if (vmax < image.data[i])
vmax = image.data[i];
}
console.log(`Min ${vmin} Max ${vmax}`);
image.min = vmin;
image.max = vmax;
display(image);
} catch (e) {
console.log(e.message);
}
}
</script>
</body>
</html>