### Install WebPXMux with npm

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Install the WebPXMux library using npm.

```bash
npm i --save webpxmux
```

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

### Install WebPXMux with Yarn

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Install the WebPXMux library using Yarn.

```bash
yarn add webpxmux
```

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

### Install Project Dependencies with NPM

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Installs all project dependencies using npm. This command can be used as an alternative to Yarn for installing project dependencies.

```bash
npm i
```

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

### Install Project Dependencies with Yarn

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Installs all project dependencies using Yarn. This command should be run after cloning the repository.

```bash
yarn
```

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

### Install and Activate Emscripten SDK

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Installs the latest Emscripten SDK tools and activates them for the current user. This command sets up the necessary environment variables for Emscripten development.

```bash
# Fetch the latest version of the emsdk (not needed the first time you clone)
git pull

# Download and install the latest SDK tools.
./emsdk install latest

# Make the "latest" SDK "active" for the current user. (writes .emscripten file)
./emsdk activate latest

# Activate PATH and other environment variables in the current terminal
source ./emsdk_env.sh
```

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

### Initialize WebPXMux Instance

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Creates a new instance of WebPXMux. An optional path to the WebAssembly file can be provided for browser environments.

```javascript
const xMux = WebPXMux(/* optional path to WebAssembly file */);
```

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

### Build for Web with Yarn

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Builds the project for web browser environments using the 'build:web' script. This command prepares the library for client-side JavaScript execution in web pages.

```bash
yarn build:web
```

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

### Wait for WebPXMux Runtime Initialization (Async/Await)

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Waits for the WebAssembly runtime to be initialized using async/await syntax before calling encoding/decoding functions.

```javascript
await xMux.waitRuntime();
```

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

### Load WebPXMux with Require.JS in Browser

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Loads WebPXMux using Require.JS and initializes it with the WASM path. Reads a file selected by the user and decodes its frames.

```html
<script src="https://.../require.min.js"></script>
```

```javascript
require(["./dist/webpxmux"], function (WebPXMux) {
  var xMux = WebPXMux("./dist/webpxmux.wasm"); // <- IMPORTANT
  xMux.waitRuntime().then(function () {
    var reader = new FileReader();
    reader.onload = function () {
      var data = new Uint8Array(reader.result);
      xMux.decodeFrames(data).then(function (frames) {
        console.log(frames);
      });
    };
    reader.readAsArrayBuffer(new Blob([file]));
  });
});
```

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

### Wait for WebPXMux Runtime Initialization (Promise)

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Waits for the WebAssembly runtime to be initialized using Promise syntax before calling encoding/decoding functions.

```javascript
xMux.waitRuntime().then(...);
```

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

### Import WebPXMux using CommonJS

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Imports the WebPXMux library using the CommonJS `require` syntax.

```javascript
const WebPXMux = require("webpxmux");
```

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

### Build WebAssembly with Yarn

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Builds the WebAssembly components of the project using the 'build:make' script defined in the package.json. This command generates the Makefile using CMake and then builds the WebAssembly.

```bash
yarn build:make
```

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

### WebPXMux Constructor with WASM Path for Browsers

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Instantiates WebPXMux in a browser environment, specifying the path to the WebAssembly file.

```typescript
(constructor) WebPXMux(wasmPath?: string);
```

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

### Build for Node.js with Yarn

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Builds the project specifically for the Node.js environment using the 'build:node' script. This command is used to prepare the library for server-side JavaScript execution.

```bash
yarn build:node
```

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

### Import WebPXMux using ES Module

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Imports the WebPXMux library using the ES Module `import` syntax.

```javascript
import WebPXMux from "webpxmux";
```

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

### Clone WebPX Mux.js Repository

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Clones the WebPX Mux.js project repository, including its submodules. This is the initial step for setting up the project for development.

```bash
git clone --recurse-submodules https://github.com/SumiMakito/webpxmux.js.git
```

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

### Clone Emscripten SDK Repository

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Clones the Emscripten SDK repository to set up the Emscripten development environment. This is a prerequisite for building WebAssembly components.

```bash
git clone https://github.com/emscripten-core/emsdk.git
```

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

### Decode WebP to Bitmap (Async/Await)

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Decodes an array of bytes representing a static WebP image into a Bitmap object using async/await.

```javascript
const bitmap = await xMux.decodeWebP(uint8array);
```

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

### Decode WebP to Bitmap (Promise)

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Decodes an array of bytes representing a static WebP image into a Bitmap object using Promises.

```javascript
xMux.decodeWebP(uint8array).then((bitmap) => ...);
```

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

### Load WebPXMux with Webpack in Browser

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Loads WebPXMux using Webpack, specifying the WASM path. This method is suitable for module bundlers like Webpack.

```javascript
const WebPXMux = require("webpxmux/dist/webpxmux");
const xMux = WebPXMux("./dist/webpxmux.wasm"); // <- IMPORTANT
```

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

### Encode Frames to Animated WebP (Async/Await)

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Encodes a Frames object into a Uint8Array representing an animated WebP image using async/await.

```javascript
const uint8array = xMux.encodeFrames(frames);
```

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

### Decode Animated WebP Frames (Async/Await)

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Decodes an array of bytes representing an animated WebP image into a Frames object using async/await.

```javascript
const frames = await xMux.decodeFrames(buffer);
```

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

### Encode Frames to Animated WebP (Promise)

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Encodes a Frames object into a Uint8Array representing an animated WebP image using Promises.

```javascript
xMux.encodeFrames(frames).then((uint8array) => ...);
```

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

### Decode Animated WebP Frames (Promise)

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Decodes an array of bytes representing an animated WebP image into a Frames object using Promises.

```javascript
xMux.decodeFrames(buffer).then((frames) => ...);
```

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

### Bitmap Interface Definition

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Defines the structure for a static bitmap image, including its dimensions and RGBA pixel data.

```typescript
interface Bitmap {
  width: number;
  height: number;
  rgba: Uint32Array;
}
```

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

### Decode Animated WebP Frames in Node.js

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Reads a WebP file and decodes its frames using WebPXMux. Ensure the 'nyan.webp' file exists in the same directory.

```javascript
const WebPXMux = require("webpxmux");
const fs = require("fs");

const xMux = WebPXMux();

(async () => {
  const buffer = fs.readFileSync("nyan.webp");
  await xMux.waitRuntime();
  const frames = await xMux.decodeFrames(buffer);
  console.log(frames);
})();
```

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

### decodeWebP

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Decodes a WebP image into a bitmap. This asynchronous method returns a Promise that resolves with a Bitmap object.

```APIDOC
## decodeWebP

### Description
Decodes a WebP image into a bitmap. This asynchronous method returns a Promise that resolves with a Bitmap object.

### Method
`async`

### Endpoint
`xMux.decodeWebP(webPData: Uint8Array): Promise<Bitmap>`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **webPData** (Uint8Array) - Required - The WebP image data to decode.

### Request Example
```js
const bitmap = await xMux.decodeWebP(uint8array);

// OR using the Promise
xMux.decodeWebP(uint8array).then((bitmap) => ...);
```

### Response
#### Success Response (Bitmap)
- **width** (number) - Width of the image in pixels.
- **height** (number) - Height of the image in pixels.
- **rgba** (Uint32Array) - Stores the RGBA color information (in the `0xRRGGBBAA` order) of each pixel.

#### Response Example
```json
{
  "width": 400,
  "height": 400,
  "rgba": [Uint32Array]
}
```
```

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

### Encode Bitmap to WebP

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Encodes a Bitmap object into a WebP image format. The function returns a Promise that resolves with a Uint8Array containing the encoded image data. Alternatively, it can be used with .then() for Promise-based handling.

```typescript
async encodeWebP(bitmap: Bitmap): Promise<Uint8Array>
```

```javascript
const uint8array = await xMux.encodeWebP(bitmap);

// OR using the Promise
xMux.encodeWebP(bitmap).then((uint8array) => ...);
```

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

### encodeFrames

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Encodes a collection of frames into an animated WebP image. This asynchronous method returns a Promise that resolves with the encoded image data as a Uint8Array.

```APIDOC
## encodeFrames

### Description
Encodes a collection of frames into an animated WebP image. This asynchronous method returns a Promise that resolves with the encoded image data as a Uint8Array.

### Method
`async`

### Endpoint
`xMux.encodeFrames(frames: Frames): Promise<Uint8Array>`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **frames** (Frames) - Required - The collection of frames to encode.

### Request Example
```js
const uint8array = xMux.encodeFrames(frames);

// OR using the Promise
xMux.encodeFrames(frames).then((uint8array) => ...);
```

### Response
#### Success Response (Uint8Array)
- The returned Uint8Array stores the data of the encoded animated WebP image.

#### Response Example
(Uint8Array representing the encoded WebP image)
```

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

### decodeFrames

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Decodes an animated WebP image into a collection of frames. This asynchronous method returns a Promise that resolves with a Frames object.

```APIDOC
## decodeFrames

### Description
Decodes an animated WebP image into a collection of frames. This asynchronous method returns a Promise that resolves with a Frames object.

### Method
`async`

### Endpoint
`xMux.decodeFrames(webPData: Uint8Array): Promise<Frames>`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **webPData** (Uint8Array) - Required - The WebP image data to decode.

### Request Example
```js
const frames = await xMux.decodeFrames(buffer);

// OR using the Promise
xMux.decodeFrames(buffer).then((frames) => ...);
```

### Response
#### Success Response (Frames)
- **frameCount** (number) - Quantity of frames in the animated WebP image.
- **width** (number) - Width of the image in pixels.
- **height** (number) - Height of the image in pixels.
- **loopCount** (number) - Number of loops in each playback.
- **bgColor** (number) - Background color of the animated WebP image (0xRRGGBBAA).
- **frames** (Frame[]) - Array of frames in the animated WebP image.

#### Response Example
```json
{
  "frameCount": 12,
  "width": 400,
  "height": 400,
  "loopCount": 0,
  "bgColor": 255,
  "frames": [
    { "duration": 70, "isKeyframe": false, "rgba": [Uint32Array] },
    { "duration": 70, "isKeyframe": false, "rgba": [Uint32Array] },
    ...
  ]
}
```
```

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

### Frame Interface Definition

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Defines the structure of a single frame within an animated WebP image, including its duration, keyframe status, and RGBA pixel data.

```typescript
interface Frame {
  duration: number;
  isKeyframe: boolean;
  rgba: Uint32Array;
}
```

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

### Frames Interface Definition

Source: https://github.com/sumimakito/webpxmux.js/blob/master/README.md

Defines the structure for a collection of frames representing an animated WebP image, including metadata like frame count, dimensions, loop count, and background color.

```typescript
interface Frames {
  frameCount: number;
  width: number;
  height: number;
  loopCount: number;
  bgColor: number;
  frames: Frame[];
}
```

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