forked from external-repos/squoosh
ef4094885e
* lol zx quant * Adding ZX option * Improving colour selection so we don't end up with the same colour twice. Also fixing a bug with the colour conflict resolution. * Putting it behind a konami code * Better comments * Adding comment * Removing unnecessary malloc.
57 lines
2.1 KiB
HTML
57 lines
2.1 KiB
HTML
<!doctype html>
|
|
<style>
|
|
canvas {
|
|
image-rendering: pixelated;
|
|
}
|
|
</style>
|
|
<script src='imagequant.js'></script>
|
|
<script>
|
|
const Module = imagequant();
|
|
|
|
async function loadImage(src) {
|
|
// Load image
|
|
const img = document.createElement('img');
|
|
img.src = src;
|
|
await new Promise(resolve => img.onload = resolve);
|
|
// Make canvas same size as image
|
|
const canvas = document.createElement('canvas');
|
|
[canvas.width, canvas.height] = [img.width, img.height];
|
|
// Draw image onto canvas
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.drawImage(img, 0, 0);
|
|
return ctx.getImageData(0, 0, img.width, img.height);
|
|
}
|
|
|
|
Module.onRuntimeInitialized = async _ => {
|
|
const api = {
|
|
version: Module.cwrap('version', 'number', []),
|
|
create_buffer: Module.cwrap('create_buffer', 'number', ['number', 'number']),
|
|
destroy_buffer: Module.cwrap('destroy_buffer', '', ['number']),
|
|
quantize: Module.cwrap('quantize', '', ['number', 'number', 'number', 'number', 'number']),
|
|
zx_quantize: Module.cwrap('zx_quantize', '', ['number', 'number', 'number', 'number']),
|
|
free_result: Module.cwrap('free_result', '', ['number']),
|
|
get_result_pointer: Module.cwrap('get_result_pointer', 'number', []),
|
|
};
|
|
console.log('Version:', api.version().toString(16));
|
|
const image = await loadImage('../example.png');
|
|
const p = api.create_buffer(image.width, image.height);
|
|
Module.HEAP8.set(image.data, p);
|
|
//api.quantize(p, image.width, image.height, 256, 1.0);
|
|
api.zx_quantize(p, image.width, image.height, 1);
|
|
console.log('done');
|
|
const resultPointer = api.get_result_pointer();
|
|
const resultView = new Uint8Array(Module.HEAP8.buffer, resultPointer, image.width * image.height * 4);
|
|
const result = new Uint8ClampedArray(resultView);
|
|
api.free_result();
|
|
api.destroy_buffer(p);
|
|
|
|
const imageData = new ImageData(result, image.width, image.height);
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = image.width;
|
|
canvas.height = image.height;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.putImageData(imageData, 0, 0);
|
|
document.body.appendChild(canvas);
|
|
};
|
|
</script>
|