https://github.com/lenni009/simple-image-compressor

Simple frontend JS library to compress images
https://github.com/lenni009/simple-image-compressor

compression hacktoberfest image-processing javascript library typescript

Last synced: about 1 month ago
JSON representation

Simple frontend JS library to compress images

• Host: GitHub
• URL: https://github.com/lenni009/simple-image-compressor
• Owner: Lenni009
• License: mit
• Created: 2024-02-12T16:33:58.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-07-08T07:21:02.000Z (4 months ago)
• Last Synced: 2024-07-12T09:18:20.731Z (4 months ago)
• Topics: compression, hacktoberfest, image-processing, javascript, library, typescript
• Language: TypeScript
• Homepage: https://lenni009.github.io/simple-image-compressor/
• Size: 581 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Simple Image Compressor

This is a client-side file compression library using web workers.

Greatly inspired by https://github.com/WangYuLue/image-conversion

## Installation

### NPM

```sh

npm i simple-image-compressor

```

### CDN

```html

```

## Main function

`compressImage()`

## Parameters

1. file: File

2. config: `{ type: 'image/jpeg' | 'image/webp' = 'image/jpeg', quality: number = 0.92 }`

## Return

`Promise`

## Usage

### NPM

```js

import { compressImage } from 'simple-image-compressor';

async function compressFile(file) {

  const options = {

    quality: 0.9,

    type: 'image/jpeg',

  };

  const res = await compressImage(file, options);

  return new File([res], 'new filename.jpg', { type: 'image/jpeg' });

}

const file = document.getElementById('file-input')?.files?.[0];

const compressedImage = await compressFile(file);

// upload to server, etc.

```

### CDN

```html

  

    

    

      window.onload = () => {

        const fileInput = document.getElementById('file-input');

        fileInput.addEventListener('change', async () => {

          const file = fileInput.files[0];

          const options = {

            quality: 0.9,

            type: imageCompressor.imageTypes.WEBP,

          };

          const compressedImage = await imageCompressor.compressImage(file, options);

          // do something with the compressed image

        });

      };

    

  

  

    

  

```

### Additional Export

```js

import { imageTypes, compressImage } from 'simple-image-compressor';

```

`imageTypes` is an object containing the two expected values for `config.type`:

```js

const imageTypes = {

  WEBP: 'image/webp',

  JPEG: 'image/jpeg',

};

```

## How it works

File -> imageBitMap -> Canvas -> Blob

"ImageBitMap -> Canvas -> Blob" happens in a web worker, allowing for parallel processing.

## Similar Packages

- [browser-image-compression](https://www.npmjs.com/package/browser-image-compression)

- [image-conversion](https://www.npmjs.com/package/image-conversion)