compressor-img


> Javascript library for image compressor in client side

- Demo
- Integration in React
- Integration in Angular

Table of contents

- Getting started
- Example with React
- Browser support
- License

Getting started

$3

``shell
npm install compressor-img --save

or

yarn add compressor-img
`

$3

#### Syntax

`js
const params = {
onSuccess: response => {},
scale: 70,
quality: 70,
originalImage: "data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA..."
};
new ImageCompressor(params);
`

params

> scale (Number) : The percentage of image scaling it starts from 1 to 100.

> quality (Number) : The percentage of image quality it starts from 1 to 100.

> originalImage (base64) : Image in base64 , example : "data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA...".

> holdCompress (bool)(default value false) : set this variable a true , if you dont want to start compress the image when the class ImageCompressor is instantiated example .

> onSuccess (Function) : Callback after Compress the image. It will pass original file (base64) and compressed file (base64).

#### Example using holdcompress params

`js
const params = {
onSuccess: response => {},
scale: 70,
quality: 70,
originalImage: "data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA...",
holdCompress: true
};
const instanceImageCompressor = new ImageCompressor(params);
instanceImageCompressor.startCompress();
`

Example with React

`js
import React, { Component } from "react";
import { ImageCompressor, getImageSize } from "compressor-img";

class UploadFile extends Component {
constructor(props) {
super(props);
this.state = {
originalImage: null,
sizeOriganleImage: null,
compressedImage: null,
sizeCompressedImage: null
};
}

handleImageChange = event => {
event.preventDefault();

if (event.target.files.length !== 0) {
let reader = new FileReader();
let file = event.target.files[0];

reader.onloadend = () => {
let imageCompressor = new ImageCompressor({
onSuccess: response => {
this.setState({
originalImage: response.original,
sizeOriganleImage: getImageSize(response.original),
compressedImage: response.compressed,
sizeCompressedImage: getImageSize(response.compressed)
});
},
scale: 70,
quality: 70,
originalImage: reader.result
});
};

reader.readAsDataURL(file);
}
};

render() {
return (


⬆ back to top

Browser support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Opera (latest)
- Edge (latest)

License

MIT © youssef maghzaz

⬆ back to top