|
|
@@ -1,8 +1,16 @@
|
|
|
-const IMAGE_FILENAME = "tsodinw.bng";
|
|
|
+function setImageDataToCanvas(imageData, canvasId)
|
|
|
+{
|
|
|
+ let canvas = document.getElementById(canvasId);
|
|
|
+ canvas.width = imageData.width;
|
|
|
+ canvas.height = imageData.height;
|
|
|
+ let context = canvas.getContext("2d");
|
|
|
+ context.putImageData(imageData, 0, 0);
|
|
|
+}
|
|
|
|
|
|
-async function bng() {
|
|
|
- let bngFile = await fetch(IMAGE_FILENAME);
|
|
|
+async function bng(imageFileName) {
|
|
|
+ let bngFile = await fetch(imageFileName);
|
|
|
let fileData = await bngFile.arrayBuffer();
|
|
|
+ // TODO: allocate WebAssembly memory based on the file size
|
|
|
let memory = new WebAssembly.Memory({initial: 300, maximum: 1000});
|
|
|
new Uint8Array(memory.buffer).set(new Uint8Array(fileData));
|
|
|
let bngProgram = await WebAssembly.instantiateStreaming(
|
|
|
@@ -12,13 +20,15 @@ async function bng() {
|
|
|
let size = bngProgram.instance.exports.bng_size();
|
|
|
let width = bngProgram.instance.exports.bng_width();
|
|
|
let height = bngProgram.instance.exports.bng_height();
|
|
|
+
|
|
|
+ let unprocessedImageData = new ImageData(
|
|
|
+ new Uint8ClampedArray(memory.buffer).slice(offset, offset + size), width, height);
|
|
|
+ setImageDataToCanvas(unprocessedImageData, "bng-unprocessed");
|
|
|
+
|
|
|
bngProgram.instance.exports.bng_process();
|
|
|
- let imageData = new ImageData(new Uint8ClampedArray(memory.buffer).slice(offset, offset + size), width, height);
|
|
|
- let canvas = document.querySelector("#bng");
|
|
|
- canvas.width = width;
|
|
|
- canvas.height = height;
|
|
|
- let context = canvas.getContext("2d");
|
|
|
- context.putImageData(imageData, 0, 0);
|
|
|
+ let processedImageData = new ImageData(
|
|
|
+ new Uint8ClampedArray(memory.buffer).slice(offset, offset + size), width, height);
|
|
|
+ setImageDataToCanvas(processedImageData, "bng-processed");
|
|
|
}
|
|
|
|
|
|
-bng().catch((e) => console.log(e));
|
|
|
+bng("tsodinw.bng").catch((e) => console.log(e));
|
rexim