de543b3206
- Store Emscripten cache inside node_modules/.em_cache. Docker image ships without LTO libs, so Emscripten has to rebuild stdlibs on every build otherwise. - Merge webp_enc + webp_dec build scripts. Core libwebp library is same in both cases, so there's no point in storing and building two copies of it.
63 lines
1.7 KiB
HTML
63 lines
1.7 KiB
HTML
<!doctype html>
|
|
<script src='webp_enc.js'></script>
|
|
<script>
|
|
const module = webp_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 result = module.encode(image.data, image.width, image.height, {
|
|
quality: 75,
|
|
target_size: 0,
|
|
target_PSNR: 0,
|
|
method: 4,
|
|
sns_strength: 50,
|
|
filter_strength: 60,
|
|
filter_sharpness: 0,
|
|
filter_type: 1,
|
|
partitions: 0,
|
|
segments: 4,
|
|
pass: 1,
|
|
show_compressed: 0,
|
|
preprocessing: 0,
|
|
autofilter: 0,
|
|
partition_limit: 0,
|
|
alpha_compression: 1,
|
|
alpha_filtering: 1,
|
|
alpha_quality: 100,
|
|
lossless: 0,
|
|
exact: 0,
|
|
image_hint: 0,
|
|
emulate_jpeg_size: 0,
|
|
thread_level: 0,
|
|
low_memory: 0,
|
|
near_lossless: 100,
|
|
use_delta_palette: 0,
|
|
use_sharp_yuv: 0,
|
|
});
|
|
console.log('size', result.length);
|
|
const blob = new Blob([result], {type: 'image/webp'});
|
|
|
|
module.free_result();
|
|
|
|
const blobURL = URL.createObjectURL(blob);
|
|
const img = document.createElement('img');
|
|
img.src = blobURL;
|
|
document.body.appendChild(img);
|
|
};
|
|
</script>
|