Promisify emscripten modules & fix webp examples (#817)

This commit is contained in:
Trevor Manz
2020-09-29 19:05:59 -04:00
committed by GitHub
parent 42f9e4aed2
commit 63ac34a662
9 changed files with 23 additions and 36 deletions

View File

@@ -2,5 +2,5 @@ interface AVIFModule extends EmscriptenWasm.Module {
decode(data: BufferSource): ImageData | null;
}
export default function(opts: EmscriptenWasm.ModuleOpts): AVIFModule;
export default function(opts: EmscriptenWasm.ModuleOpts): Promise<AVIFModule>;

View File

@@ -4,4 +4,4 @@ interface AVIFModule extends EmscriptenWasm.Module {
encode(data: BufferSource, width: number, height: number, options: EncodeOptions): Uint8Array | null;
}
export default function(opts: EmscriptenWasm.ModuleOpts): AVIFModule;
export default function(opts: EmscriptenWasm.ModuleOpts): Promise<AVIFModule>;

View File

@@ -3,4 +3,4 @@ interface QuantizerModule extends EmscriptenWasm.Module {
zx_quantize(data: BufferSource, width: number, height: number, dither: number): Uint8ClampedArray;
}
export default function(opts: EmscriptenWasm.ModuleOpts): QuantizerModule;
export default function(opts: EmscriptenWasm.ModuleOpts): Promise<QuantizerModule>;

View File

@@ -4,4 +4,4 @@ interface MozJPEGModule extends EmscriptenWasm.Module {
encode(data: BufferSource, width: number, height: number, options: EncodeOptions): Uint8Array;
}
export default function(opts: EmscriptenWasm.ModuleOpts): MozJPEGModule;
export default function(opts: EmscriptenWasm.ModuleOpts): Promise<MozJPEGModule>;

View File

@@ -1,22 +1,20 @@
<!doctype html>
<script src='webp_dec.js'></script>
<script>
const Module = webp_dec();
async function loadFile(src) {
const resp = await fetch(src);
return await resp.arrayBuffer();
}
Module.onRuntimeInitialized = async _ => {
console.log('Version:', Module.version().toString(16));
webp_dec().then(async module => {
console.log('Version:', module.version().toString(16));
const image = await loadFile('../../example.webp');
const imageData = Module.decode(image);
const imageData = module.decode(image);
const canvas = document.createElement('canvas');
canvas.width = result.width;
canvas.height = result.height;
canvas.width = imageData.width;
canvas.height = imageData.height;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
ctx.putImageData(imageData, 0, 0);
};
});
</script>

View File

@@ -2,4 +2,4 @@ interface WebPModule extends EmscriptenWasm.Module {
decode(data: BufferSource): ImageData | null;
}
export default function(opts: EmscriptenWasm.ModuleOpts): WebPModule;
export default function(opts: EmscriptenWasm.ModuleOpts): Promise<WebPModule>;

View File

@@ -1,8 +1,6 @@
<!doctype html>
<script src='webp_enc.js'></script>
<script>
const module = webp_enc();
async function loadImage(src) {
// Load image
const img = document.createElement('img');
@@ -17,7 +15,7 @@
return ctx.getImageData(0, 0, img.width, img.height);
}
module.onRuntimeInitialized = async _ => {
webp_enc().then(async module => {
console.log('Version:', module.version().toString(16));
const image = await loadImage('../../example.png');
const result = module.encode(image.data, image.width, image.height, {
@@ -56,5 +54,5 @@
const img = document.createElement('img');
img.src = blobURL;
document.body.appendChild(img);
};
});
</script>

View File

@@ -4,4 +4,4 @@ interface WebPModule extends EmscriptenWasm.Module {
encode(data: BufferSource, width: number, height: number, options: EncodeOptions): Uint8Array | null;
}
export default function(opts: EmscriptenWasm.ModuleOpts): WebPModule;
export default function(opts: EmscriptenWasm.ModuleOpts): Promise<WebPModule>;

View File

@@ -1,13 +1,12 @@
type ModuleFactory<M extends EmscriptenWasm.Module> = (
opts: EmscriptenWasm.ModuleOpts,
) => M;
) => Promise<M>;
export function initEmscriptenModule<T extends EmscriptenWasm.Module>(
moduleFactory: ModuleFactory<T>,
wasmUrl: string,
): Promise<T> {
return new Promise((resolve) => {
const module = moduleFactory({
return moduleFactory({
// Just to be safe, don't automatically invoke any wasm functions
noInitialRun: true,
locateFile(url: string): string {
@@ -15,14 +14,6 @@ export function initEmscriptenModule<T extends EmscriptenWasm.Module>(
if (url.endsWith('.wasm')) return wasmUrl;
return url;
},
onRuntimeInitialized() {
// An Emscripten is a then-able that resolves with itself, causing an infite loop when you
// wrap it in a real promise. Delete the `then` prop solves this for now.
// https://github.com/kripken/emscripten/issues/5820
delete (module as any).then;
resolve(module);
},
});
});
}