https://github.com/juunini/webp-converter-browser

Convert image to webp in browser side
https://github.com/juunini/webp-converter-browser

browser converter frontend webp

Last synced: 6 days ago
JSON representation

Convert image to webp in browser side

• Host: GitHub
• URL: https://github.com/juunini/webp-converter-browser
• Owner: juunini
• License: mit
• Created: 2023-01-03T14:31:36.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-12-02T23:58:17.000Z (23 days ago)
• Last Synced: 2024-12-13T02:51:31.764Z (13 days ago)
• Topics: browser, converter, frontend, webp
• Language: JavaScript
• Homepage:
• Size: 135 KB
• Stars: 38
• Watchers: 1
• Forks: 5
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
WebP Converter Browser




  








  








  

    

  



---

## [Demo](https://juunini.github.io/webp-converter-browser)

## Introduce

Convert your image in browser side(frontend side).  

## Install

```bash

# 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

```ts

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

```html

  // ...

  // 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 */ })

```

## Options

| Name | Description | Default            |

|-|-|--------------------|

| quality | image quality | 0.75               |

| width | image width | Given image width  |

| height | image height | Given image height |