mirror of
https://github.com/GoogleChromeLabs/squoosh.git
synced 2025-11-14 17:49:52 +00:00
a6477b82fc
# Conflicts: # codecs/cpp.Dockerfile # codecs/imagequant/example.html # codecs/webp/dec/webp_dec.d.ts # codecs/webp/dec/webp_dec.js # codecs/webp/dec/webp_dec.wasm # codecs/webp/enc/webp_enc.d.ts # codecs/webp/enc/webp_enc.js # codecs/webp/enc/webp_enc.wasm # package-lock.json # package.json # src/codecs/tiny.webp # src_old/codecs/encoders.ts # src_old/codecs/processor-worker/tiny.avif # src_old/codecs/processor-worker/tiny.webp # src_old/codecs/tiny.webp # src_old/components/compress/index.tsx # src_old/lib/util.ts # src_old/sw/util.ts
64 lines
1.7 KiB
HTML
64 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<script type="module">
|
|
import webp_enc from './webp_enc.js';
|
|
|
|
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);
|
|
}
|
|
|
|
async function main() {
|
|
const module = await webp_enc();
|
|
|
|
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' });
|
|
|
|
const blobURL = URL.createObjectURL(blob);
|
|
const img = document.createElement('img');
|
|
img.src = blobURL;
|
|
document.body.appendChild(img);
|
|
}
|
|
|
|
main();
|
|
</script>
|