### Start Squoosh Development Server

Source: https://github.com/googlechromelabs/squoosh/blob/dev/README.md

After building the app, use this command to start the local development server. This allows you to preview changes and test the application locally.

```sh
npm run dev
```

--------------------------------

### Install Node Packages for Squoosh

Source: https://github.com/googlechromelabs/squoosh/blob/dev/README.md

Run this command in your terminal to install all necessary Node.js packages for Squoosh development. Ensure you have Node.js and npm installed.

```sh
npm install
```

--------------------------------

### Build Codecs with npm

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/README.md

Commands to install dependencies and build codecs. This process generates .js and .wasm files for each codec.

```bash
npm install
npm run build
```

--------------------------------

### ImageQuant Main Function

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/imagequant/example.html

Initializes ImageQuant, loads an image, quantizes it, and displays the result on a canvas. Requires the ImageQuant module to be loaded.

```javascript
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();
```

--------------------------------

### Build Squoosh App

Source: https://github.com/googlechromelabs/squoosh/blob/dev/README.md

Execute this command to build the Squoosh application for development. This step compiles assets and prepares the project.

```sh
npm run build
```

--------------------------------

### version()

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/webp/enc/README.md

Returns the version of the libwebp library.

```APIDOC
## version()

### Description
Returns the version of libwebp as a number. va.b.c is encoded as 0x0a0b0c

### Method
`int`

### Return Value
- `int`: The version of libwebp.
```

--------------------------------

### quantize(buffer, image_width, image_height, numColors, dithering)

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/imagequant/README.md

Quantizes an image using specified parameters. It takes the image buffer, dimensions, maximum number of colors, and dithering level as input, returning a RawImage object.

```APIDOC
## quantize(std::string buffer, int image_width, int image_height, int numColors, float dithering)

### Description
Quantizes the given images, using at most `numColors`, a value between 2 and 256. `dithering` is a value between 0 and 1 controlling the amount of dithering. `RawImage` is a class with 3 fields: `buffer`, `width`, and `height`.

### Method
`RawImage`

### Parameters
* **buffer** (std::string) - The image data buffer.
* **image_width** (int) - The width of the image.
* **image_height** (int) - The height of the image.
* **numColors** (int) - The maximum number of colors to use (between 2 and 256).
* **dithering** (float) - The amount of dithering to apply (between 0 and 1).
```

--------------------------------

### version()

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/imagequant/README.md

Retrieves the version of the libimagequant library. The version is encoded as a number where vA.B.C is represented as 0x0A0B0C.

```APIDOC
## version()

### Description
Returns the version of libimagequant as a number. vA.B.C is encoded as 0x0A0B0C.

### Method
`int`

### Parameters
None
```

--------------------------------

### zx_quantize(buffer, image_width, image_height, dithering)

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/imagequant/README.md

Performs quantization with a focus on ZX. This function takes the image buffer, dimensions, and dithering level.

```APIDOC
## zx_quantize(std::string buffer, int image_width, int image_height, float dithering)

### Description
Quantizes the given images using ZX method. `RawImage` is a class with 3 fields: `buffer`, `width`, and `height`.

### Method
`RawImage`

### Parameters
* **buffer** (std::string) - The image data buffer.
* **image_width** (int) - The width of the image.
* **image_height** (int) - The height of the image.
* **dithering** (float) - The amount of dithering to apply (between 0 and 1).
```

--------------------------------

### version()

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/webp/dec/README.md

Retrieves the version of the libwebp library used by the decoder. The version is encoded as a number where major, minor, and patch versions (a.b.c) are represented as 0x0a0b0c.

```APIDOC
## version()

### Description
Returns the version of libwebp as a number. va.b.c is encoded as 0x0a0b0c.

### Signature
`int version()`
```

--------------------------------

### encode()

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/webp/enc/README.md

Encodes an image buffer into WebP format.

```APIDOC
## encode(image_buffer, image_width, image_height, config)

### Description
Encodes the given image with given dimension to WebP.

### Parameters
- **image_buffer** (`uint8_t*`): Pointer to the image data buffer.
- **image_width** (`int`): The width of the image.
- **image_height** (`int`): The height of the image.
- **config** (`WebPConfig`): Configuration options for the WebP encoding.

### Return Value
- `UInt8Array`: The encoded WebP image data.
```

--------------------------------

### Patch Emscripten dlmalloc.c and Rebuild

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/visdif/BUILD.md

This snippet shows how to enter a Docker container, patch the dlmalloc.c file with a specific alignment, clear the Emscripten cache, and rebuild the library. This is required for the codec to function correctly.

```bash
$ docker run --rm -it -v $(PWD):/src squoosh-cpp "/bin/bash"
# cat << EOF | patch /emsdk/upstream/emscripten/system/lib/dlmalloc.c
659c659
< #define MALLOC_ALIGNMENT ((size_t)(2 * sizeof(void *)))
---
> #define MALLOC_ALIGNMENT ((size_t)(16U))
EOF
# emcc --clear-cache
# /emsdk/upstream/emscripten/embuilder build libdlmalloc --force
# emmake make
```

--------------------------------

### Load Image Function

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/imagequant/example.html

Loads an image from a given source and returns its pixel data. Ensures the image is fully loaded before proceeding.

```javascript
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);
}
```

--------------------------------

### Load and Draw Image to Canvas

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/webp/enc/example.html

Helper function to load an image from a source, draw it onto a canvas, and return its pixel data. Ensures the image is fully loaded before proceeding.

```javascript
async function loadImage(src) {
  const img = document.createElement('img');
  img.src = src;
  await new Promise(resolve => img.onload = resolve);
  const canvas = document.createElement('canvas');
  [canvas.width, canvas.height] = [img.width, img.height];
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  return ctx.getImageData(0, 0, img.width, img.height);
}
```

--------------------------------

### WebP Encoding and Display

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/webp/enc/example.html

Encodes an image to WebP format using the WebP encoder library and displays the result. Adjust quality and other encoding parameters as needed.

```javascript
webp_enc().then(async module => {
  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);
});
```

--------------------------------

### ImageData decode(uint8_t* image_buffer, int image_width, int image_height)

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/wp2/dec/README.md

Decodes the given WebP2 buffer into raw RGBA represented as an ImageData object. This function takes a pointer to the image buffer, and its width and height as input.

```APIDOC
## decode

### Description
Decodes the given WebP2 buffer into raw RGBA represented as an `ImageData`.

### Signature
`ImageData decode(uint8_t* image_buffer, int image_width, int image_height)`

### Parameters
#### Input Parameters
- **image_buffer** (uint8_t*) - Pointer to the WebP2 image data buffer.
- **image_width** (int) - The width of the image buffer.
- **image_height** (int) - The height of the image buffer.

### Returns
- **ImageData** - An object containing the decoded raw RGBA image data.
```

--------------------------------

### Decode WebP Image and Display on Canvas

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/webp/dec/example.html

Loads a WebP image, decodes it using the WebP decoder module, and displays the resulting image data on an HTML canvas. Ensure the WebP decoder module is loaded before executing this code.

```javascript
async function loadFile(src) { const resp = await fetch(src); return await resp.arrayBuffer(); }
webp_dec().then(async module => {
  console.log('Version:', module.version().toString(16));
  const image = await loadFile('../../example.webp');
  const imageData = module.decode(image);
  const canvas = document.createElement('canvas');
  canvas.width = imageData.width;
  canvas.height = imageData.height;
  document.body.appendChild(canvas);
  const ctx = canvas.getContext('2d');
  ctx.putImageData(imageData, 0, 0);
});
```

--------------------------------

### AVIF Encoder Options Structure

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/avif/enc/README.md

Defines the structure for AVIF encoding options. Use these fields to control quality, tiling, speed, and subsampling.

```c++
struct AvifOptions {
  // 0 = lossless
  // 63 = worst quality
  int minQuantizer;
  int maxQuantizer;

  // [0 - 6]
  // Creates 2^n tiles in that dimension
  int tileRowsLog2;
  int tileColsLog2;

  // 0 = slowest
  // 10 = fastest
  int speed;

  // 0 = 4:2:0
  // 1 = 4:2:2
  // 2 = 4:4:4
  int subsample;
};
```

--------------------------------

### decode(buffer)

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/webp/dec/README.md

Decodes a given WebP image buffer into raw RGBA format. The decoded image data is returned as a RawImage object containing the pixel buffer, width, and height.

```APIDOC
## decode(buffer)

### Description
Decodes the given webp buffer into raw RGBA. `RawImage` is a class with 3 fields: `buffer`, `width`, and `height`.

### Signature
`RawImage decode(std::string buffer)`

### Parameters
#### Path Parameters
- **buffer** (std::string) - Required - The WebP image data buffer to decode.
```

--------------------------------

### AVIF Encode Function

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/avif/enc/README.md

Encodes an image to AVIF format with specified dimensions and options.

```APIDOC
## `Uint8Array encode(std::string image_in, int image_width, int image_height, AvifOptions opts)`

### Description
Encodes the given image with given dimension to AVIF.

### Parameters
- `image_in` (std::string) - The input image data.
- `image_width` (int) - The width of the input image.
- `image_height` (int) - The height of the input image.
- `opts` (AvifOptions) - Configuration options for AVIF encoding.

### `AvifOptions` Struct

#### Fields
- `minQuantizer` (int) - Minimum quantizer (0 = lossless, 63 = worst quality).
- `maxQuantizer` (int) - Maximum quantizer (0 = lossless, 63 = worst quality).
- `tileRowsLog2` (int) - Log base 2 of the number of tile rows ([0 - 6]). Creates 2^n tiles in that dimension.
- `tileColsLog2` (int) - Log base 2 of the number of tile columns ([0 - 6]). Creates 2^n tiles in that dimension.
- `speed` (int) - Encoding speed (0 = slowest, 10 = fastest).
- `subsample` (int) - Chroma subsampling format (0 = 4:2:0, 1 = 4:2:2, 2 = 4:4:4).
```

--------------------------------

### Worker Code Export

Source: https://github.com/googlechromelabs/squoosh/blob/dev/src/features/README.md

Default export from a file in the worker folder is bundled into the worker and exposed via comlink.

```typescript
export default function () {
  console.log('OI YOU');
}
```

--------------------------------

### encode

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/wp2/enc/README.md

Encodes the given image with given dimension to WebP2. This function takes a buffer of image data, its width and height, and an encoder configuration object.

```APIDOC
## encode

### Description
Encodes the given image with given dimension to WebP2.

### Signature
`UInt8Array encode(uint8_t* image_buffer, int image_width, int image_height, WP2.EncoderConfig config)`

### Parameters
- **image_buffer** (uint8_t*) - Pointer to the raw image data buffer.
- **image_width** (int) - The width of the image in pixels.
- **image_height** (int) - The height of the image in pixels.
- **config** (WP2.EncoderConfig) - Configuration object for the WebP2 encoder.
```

--------------------------------

### Encoder Meta Data Structure

Source: https://github.com/googlechromelabs/squoosh/blob/dev/src/features/README.md

Defines the required metadata for encoders, including label, mimeType, extension, EncodeOptions, and defaultOptions.

```typescript
interface Props {
  options: EncodeOptions;
  onChange(newOptions: EncodeOptions): void;
}
```

--------------------------------

### decode

Source: https://github.com/googlechromelabs/squoosh/blob/dev/codecs/avif/dec/README.md

Decodes the given avif buffer into raw RGBA. The decoded image is returned as a RawImage object containing the pixel buffer, width, and height.

```APIDOC
## decode

### Description
Decodes the given avif buffer into raw RGBA. `RawImage` is a class with 3 fields: `buffer`, `width`, and `height`.

### Signature
`RawImage decode(std::string buffer)`

### Parameters
#### Path Parameters
- **buffer** (std::string) - Required - The AVIF image data buffer to decode.

### Returns
- **RawImage** - An object containing the decoded image data.
  - **buffer** (bytes) - The raw RGBA pixel data.
  - **width** (integer) - The width of the decoded image.
  - **height** (integer) - The height of the decoded image.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.