squoosh/codecs/imagequant/example.html at dev · puteulanus/squoosh · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<style>
  canvas {
    image-rendering: pixelated;
  }
</style>
<script type="module">
  import imagequant from './imagequant.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 imagequant();

    console.log('Version:', module.version().toString(16));
    const image = await loadImage('../example.png');
    const rawImage = module.quantize(
      image.data,
      image.width,
      image.height,
      256,
      1.0,
    );
    console.log('done');

    const imageData = new ImageData(
      new Uint8ClampedArray(rawImage.buffer),
      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);
  }

  main();
</script>