juunini/webp-converter-browser

Convert image to webp in browser side

WebP Converter Browser

---

Demo

Introduce

Convert your image in browser side(frontend side).

Install

# npm
npm install webp-converter-browser

# yarn
yarn add webp-converter-browser

# pnpm
pnpm add webp-converter-browser

# bun
bun add webp-converter-browser

Usage

import { srcToWebP, blobToWebP, arrayBufferToWebP } from 'webp-converter-browser'

// ...

// When it cause CORS, you may failed to use `srcToWebP`
const webpBlob = await srcToWebP(pngSrc, { /** options */ })
// or
const webpBlob = await blobToWebP(pngBlob, { /** options */ })
// or
const webpBlob = await arrayBufferToWebP(jpgArrayBuffer, { /** options */ })

Vanilla

<script src="https://cdn.jsdelivr.net/npm/webp-converter-browser@latest/dist/index.min.js"></script>

<script>
  // ...

  // When it cause CORS, you may failed to use `srcToWebP`
  const webpBlob = await webpConverterBrowser.srcToWebP(pngSrc, { /** options */ })
  // or
  const webpBlob = await webpConverterBrowser.blobToWebP(pngBlob, { /** options */ })
  // or
  const webpBlob = await webpConverterBrowser.arrayBufferToWebP(jpgArrayBuffer, { /** options */ })
</script>

Options

Name	Description	Default
quality	image quality	0.75
width	image width	Given image width
height	image height	Given image height