Have ideas to improve npm?Join in the discussion! »

    webpxmux
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.2 • Public • Published

    WebPXMux.js

    A JavaScript library for muxing and demuxing animated WebP images and encoding and decoding WebP images.

    Installation

    npm i --save webpxmux

    OR

    yarn add webpxmux

    Examples

    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);
    })();

    Output:

    {
      frameCount: 12,
      width: 400,
      height: 400,
      loopCount: 0,
      bgColor: 255,
      frames: [
        { duration: 70, isKeyframe: false, rgba: [Uint32Array] },
        { duration: 70, isKeyframe: false, rgba: [Uint32Array] },
        { duration: 70, isKeyframe: false, rgba: [Uint32Array] },
        { duration: 70, isKeyframe: false, rgba: [Uint32Array] },
        ...
      ]
    }

    Using in browsers

    When using WebPXMux in browsers, the required WebAssembly cannot be auto looked up. Thus, you have to specify the path (relative to website root) to the WebAssembly file using the constructor. (The specified WebAssembly file path should be accessible from the browser.)

    (constructor) WebPXMux(wasmPath?: string);

    With Require.JS

    <script src="https://.../require.min.js"></script>
    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]));
      });
    });

    With Webpack

    Import/require webpxmux.js under the dist/ directory instead.

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

    Usage

    Importing WebXMux to your project

    const WebPXMux = require("webpxmux");
     
    // OR using the `import` statement
    import WebPXMux from "webpxmux";

    Initializing WebXMux

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

    Waiting for the runtime

    The WebAssembly runtime is required to be initialized before encoding/muxing/demuxing functions can be called.

    await xMux.waitRuntime();
     
    // OR using the Promise
    xMux.waitRuntime().then(...);

    ⚠️ An Error will be thrown if encoding/decoding/muxing/demuxing functions are called before runtime being initialized.

    Waiting for the runtime

    await xMux.waitRuntime();
     
    // OR using the Promise
    xMux.waitRuntime().then(...);

    Type: Frame, Frames and Bitmap

    Frame

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

    duration

    Duration of current frame in milliseconds.

    isKeyframe

    Whether current frame is keyframe or not.

    rgba

    Stores the RGBA color information (in the 0xRRGGBBAA order) of each pixel.

    Pixel data are ordered from left to right and then from top to bottom.

    Frames

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

    frameCount

    Quantity of frames that are counted in the animated WebP image.

    width and height

    Sizes of the image in pixels.

    loopCount

    Number of loops in each playback.

    bgColor

    Background of the animated WebP image represented by a 32-bit unsigned integer in the 0xRRGGBBAA order.

    frames

    Array of frames in the animated WebP image.

    Bitmap

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

    width and height

    Sizes of the image in pixels.

    rgba

    Stores the RGBA color information (in the 0xRRGGBBAA order) of each pixel.

    Pixel data are ordered from left to right and then from top to bottom.

    Demuxing (Decoding frames)

    (async) decodeFrames(webPDataUint8Array)Promise<Frames>
    const frames = await xMux.decodeFrames(buffer);
     
    // OR using the Promise
    xMux.decodeFrames(buffer).then((frames) => ...);

    Muxing (Encoding frames)

    (async) encodeFrames(framesFrames)Promise<Uint8Array>

    The returned Uint8Array stores the data of the encoded animated WebP image.

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

    Decoding (WebP to Bitmap)

    (async) decodeWebP(webPDataUint8Array)Promise<Bitmap>
    const bitmap = await xMux.decodeWebP(uint8array);
     
    // OR using the Promise
    xMux.decodeWebP(uint8array).then((bitmap) => ...);

    Encoding (Bitmap to WebP)

    The returned Uint8Array stores the data of the encoded WebP image.

    (async) encodeWebP(bitmapBitmap)Promise<Uint8Array>
    const uint8array = await xMux.encodeWebP(bitmap);
     
    // OR using the Promise
    xMux.encodeWebP(bitmap).then((uint8array) => ...);

    Development

    Since WebPXMux uses Emscripten and CMake to build its C code into WebAssembly, both Emscripten and CMake are required during the development.

    Emscripten

    For more detailed installation instructions, please refer to Getting Started: Download and install.

    # Get the emsdk repo 
    git clone https://github.com/emscripten-core/emsdk.git
     
    # Enter that directory 
    cd emsdk
     
    # 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

    CMake

    Please refer to the official installation instructions.

    Clone the repository

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

    Build WebAssembly

    This command generates the Makefile using CMake and builds the WebAssembly.

    yarn build:make

    Build for Node.js

    yarn build:node

    Build for web

    yarn build:web

    License

    WebPXMux.js is released under the MIT license.

    Install

    npm i webpxmux

    DownloadsWeekly Downloads

    1

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    19.1 MB

    Total Files

    318

    Last publish

    Collaborators

    • avatar