webp-encoder v1.0.19

Webp-Encoder - crossbrowser webp encoder

It's a WASM wrapper arown libwebp

Installing package

yarn add webp-encoder

npm i webp-encoder

Modify your bundler config for put needed wasm files in your public dir

Here is example for Vite

import { defineConfig } from "vite";
import { viteStaticCopy } from "vite-plugin-static-copy";
import * as path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    viteStaticCopy({
      targets: [
        {
          src:
            path.resolve(__dirname, "node_modules/webpc/lib/assets") +
            "/*.wasm",
          dest: "./",
        },
      ],
    }),
  ],
});

And for WebPack

new CopyWebpackPlugin([
  {
    from: path.resolve(__dirname, "node_modules/webp-encoder/lib/assets") + '/*.wasm',
    to: '',
  }
]),

Usage

import WebPEncoder from "webp-encoder";

async function loadImage(src) {
  const imgBlob = await fetch(src).then((resp) => resp.blob());
  const img = await createImageBitmap(imgBlob);
  const canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  return ctx.getImageData(0, 0, img.width, img.height);
}

const imageData = await loadImage("https://some.url.to.image");

const convertedImage = WebPEncoder.encodeImageData(
  imageData.data, 
  imageData.width, 
  imageData.height, 
  quality
);

const F = new File([convertedImage], "test.webp", {
  type: "image/webp",
});

interface IWebPEncoder {
  encodeImageData: (
    buffer: Uint8ClampedArray,
    width: number,
    height: number,
    quality: number,
  ) => Uint8ClampedArray;
}