forked from external-repos/squoosh
1ae65dd4a1
* Switching to embind * Adding options to mozjpeg wasm * Updating packages * Ditching enum - causing more problems than it's worth * Adding mozjpeg options UI * Forgot about this enum * Bools just work
54 lines
1.7 KiB
HTML
54 lines
1.7 KiB
HTML
<!doctype html>
|
|
<script src='mozjpeg_enc.js'></script>
|
|
<script>
|
|
const module = mozjpeg_enc();
|
|
|
|
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 _ => {
|
|
console.log('Version:', module.version().toString(16));
|
|
const image = await loadImage('../example.png');
|
|
const p = module.create_buffer(image.width, image.height);
|
|
module.HEAP8.set(image.data, p);
|
|
module.encode(p, image.width, image.height, {
|
|
quality: 40,
|
|
baseline: false,
|
|
arithmetic: false,
|
|
progressive: true,
|
|
optimize_coding: true,
|
|
smoothing: 0,
|
|
color_space: 3,
|
|
quant_table: 3,
|
|
trellis_multipass: true,
|
|
trellis_opt_zero: true,
|
|
trellis_opt_table: true,
|
|
trellis_loops: 1,
|
|
});
|
|
const resultPointer = module.get_result_pointer();
|
|
const resultSize = module.get_result_size();
|
|
console.log('size', resultSize);
|
|
const resultView = new Uint8Array(module.HEAP8.buffer, resultPointer, resultSize);
|
|
const result = new Uint8Array(resultView);
|
|
module.free_result();
|
|
module.destroy_buffer(p);
|
|
|
|
const blob = new Blob([result], {type: 'image/jpeg'});
|
|
const blobURL = URL.createObjectURL(blob);
|
|
const img = document.createElement('img');
|
|
img.src = blobURL;
|
|
document.body.appendChild(img);
|
|
};
|
|
</script>
|