95 lines
2.7 KiB
JavaScript
95 lines
2.7 KiB
JavaScript
const fileInput = document.getElementById("source-image");
|
|
const btn = document.getElementById("go-btn");
|
|
const output = document.getElementById("output");
|
|
const outputWrapper = document.getElementById("output-wrapper");
|
|
|
|
function wasmWorker(modulePath) {
|
|
// Create an object to later interact with
|
|
const proxy = {};
|
|
|
|
// Keep track of the messages being sent
|
|
// so we can resolve them correctly
|
|
let id = 0;
|
|
let idPromises = {};
|
|
|
|
return new Promise((resolve, reject) => {
|
|
const worker = new Worker("worker.js");
|
|
worker.postMessage({ eventType: "INITIALISE", eventData: modulePath });
|
|
worker.addEventListener("message", function (event) {
|
|
const { eventType, eventData, eventId } = event.data;
|
|
|
|
if (eventType === "INITIALISED") {
|
|
const methods = event.data.eventData;
|
|
methods.forEach((method) => {
|
|
proxy[method] = function () {
|
|
return new Promise((resolve, reject) => {
|
|
worker.postMessage({
|
|
eventType: "CALL",
|
|
eventData: {
|
|
method: method,
|
|
arguments: Array.from(arguments), // arguments is not an array
|
|
},
|
|
eventId: id,
|
|
});
|
|
|
|
idPromises[id] = { resolve, reject };
|
|
id++;
|
|
});
|
|
};
|
|
});
|
|
resolve(proxy);
|
|
return;
|
|
} else if (eventType === "RESULT") {
|
|
if (eventId !== undefined && idPromises[eventId]) {
|
|
idPromises[eventId].resolve(eventData);
|
|
delete idPromises[eventId];
|
|
}
|
|
} else if (eventType === "ERROR") {
|
|
if (eventId !== undefined && idPromises[eventId]) {
|
|
idPromises[eventId].reject(event.data.eventData);
|
|
delete idPromises[eventId];
|
|
}
|
|
}
|
|
});
|
|
|
|
worker.addEventListener("error", function (error) {
|
|
reject(error);
|
|
});
|
|
});
|
|
}
|
|
|
|
let workerResolve;
|
|
const wasmReady = new Promise((resolve) => {
|
|
workerResolve = resolve;
|
|
});
|
|
|
|
let workerProxy;
|
|
wasmWorker("./main.wasm").then((w) => {
|
|
workerProxy = w;
|
|
workerResolve();
|
|
btn.removeAttribute("disabled");
|
|
});
|
|
|
|
btn.addEventListener("click", async () => {
|
|
// Clear image
|
|
output.src = "";
|
|
|
|
// Check if a file was selected
|
|
if (fileInput.files.length === 0) {
|
|
alert("No file selected");
|
|
return;
|
|
}
|
|
const reader = new FileReader();
|
|
reader.readAsArrayBuffer(fileInput.files[0]);
|
|
reader.onloadend = async (evt) => {
|
|
if (evt.target.readyState === FileReader.DONE) {
|
|
const imageData = new Uint8Array(evt.target.result);
|
|
const ditheredImage = await workerProxy.DitherNord(imageData);
|
|
|
|
const outputValue = `data:image/png;base64,${ditheredImage}`;
|
|
output.src = outputValue;
|
|
outputWrapper.href = outputValue;
|
|
}
|
|
};
|
|
});
|