Skip to content

TypeScript refactor, fix exact sizing #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

TypeScript refactor, fix exact sizing #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@
/node_modules

# production
/build
/dist

# npm packs
react-image-file-resizer-0.4.8.tgz
react-image-file-resizer*.tgz

.DS_Store

166 changes: 67 additions & 99 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,16 @@

[![Build Status](https://travis-ci.org/onurzorluer/react-image-file-resizer.svg?branch=master)](https://travis-ci.org/onurzorluer/react-image-file-resizer.svg?branch=master) [![npm version](https://badge.fury.io/js/react-image-file-resizer.svg)](https://badge.fury.io/js/react-image-file-resizer)

`react-image-file-resizer` is a react module that can rescaled local images.
`react-image-file-resizer` is a react module that resizes images in the browser.

- You can change image's width, height, format, rotation and quality.
- It returns resized image's new base64 URI or Blob. The URI can be used as the source of an `<Image>` component.
- It returns resized image's new base64 URI, Blob, or File. The URI can be used as the source of an `<Image>` component.

## v1.0.0 Breaking Changes

* This project has been converted to TypeScript with a generated type definition file.
* The main method `imageFileResizer` accepts an options object argument instead of multiple individual arguments.
* It returns a Promise instead of using a callback.

## Setup

Expand All @@ -28,97 +34,47 @@ yarn add react-image-file-resizer
## Usage

```javascript
import Resizer from "react-image-file-resizer";

Resizer.imageFileResizer(
file, // Is the file of the image which will resized.
maxWidth, // Is the maxWidth of the resized new image.
maxHeight, // Is the maxHeight of the resized new image.
compressFormat, // Is the compressFormat of the resized new image.
quality, // Is the quality of the resized new image.
rotation, // Is the degree of clockwise rotation to apply to uploaded image.
responseUriFunc, // Is the callBack function of the resized new image URI.
outputType, // Is the output type of the resized new image.
minWidth, // Is the minWidth of the resized new image.
minHeight // Is the minHeight of the resized new image.
);
import { imageFileResizer } from "react-image-file-resizer";

const newImage = await imageFileResizer({
compressFormat, // the compression format of the resized image.
file, // the file of the image to resize.
maxHeight, // the maxHeight of the resized image.
maxWidth, // the maxWidth of the resized image.
minHeight // the minHeight of the resized image.
minWidth, // the minWidth of the resized image.
outputType, // the output type of the resized image.
quality, // the quality of the resized image.
rotation, // the degree of clockwise rotation to apply to uploaded image.
});
```

## Example 1

First, wrap the resizer:
## Example

```javascript
import Resizer from "react-image-file-resizer";

const resizeFile = (file) =>
new Promise((resolve) => {
Resizer.imageFileResizer(
file,
300,
300,
"JPEG",
100,
0,
(uri) => {
resolve(uri);
},
"base64"
);
});
```
import React, { useState } from "react";
import { imageFileResizer } from "react-image-file-resizer";

And then use it in your async function:
export function App() {
const [newImage, setNewImage] = useState();

```javascript
const onChange = async (event) => {
try {
const file = event.target.files[0];
const image = await resizeFile(file);
console.log(image);
} catch (err) {
console.log(err);
}
};
```

## Example 2

```javascript
import React, { Component } from "react";
import Resizer from "react-image-file-resizer";

class App extends Component {
constructor(props) {
super(props);
this.fileChangedHandler = this.fileChangedHandler.bind(this);
this.state = {
newImage: "",
};
}

fileChangedHandler(event) {
var fileInput = false;
if (event.target.files[0]) {
fileInput = true;
}
async function fileChangedHandler(event) {
let fileInput = event.target.files[0];
if (fileInput) {
try {
Resizer.imageFileResizer(
event.target.files[0],
300,
300,
"JPEG",
100,
0,
(uri) => {
console.log(uri);
this.setState({ newImage: uri });
},
"base64",
200,
200
);
const uri = await imageFileResizer({
compressFormat: "jpeg",
file: fileInput,
maxHeight: 300,
maxWidth: 300,
minHeight: 200,
minWidth: 200,
outputType: "base64"
quality: 100,
rotation: 0,
});
console.log(uri);
setNewImage(uri);
} catch (err) {
console.log(err);
}
Expand All @@ -128,8 +84,8 @@ class App extends Component {
render() {
return (
<div className="App">
<input type="file" onChange={this.fileChangedHandler} />
<img src={this.state.newImage} alt="" />
<input type="file" onChange={fileChangedHandler} />
<img src={newImage} alt="" />
</div>
);
}
Expand All @@ -138,23 +94,35 @@ class App extends Component {
export default App;
```

| Option | Description | Type | Required |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------- |
| `file` | Path of image file | `object` | Yes |
| `maxWidth` | New image max width (ratio is preserved) | `number` | Yes |
| `maxHeight` | New image max height (ratio is preserved) | `number` | Yes |
| `compressFormat` | Can be either **JPEG**, **PNG** or **WEBP**. | `string` | Yes |
| `quality` | A number between 0 and 100. Used for the JPEG compression.(if no compress is needed, just set it to 100) | `number` | Yes |
| `rotation` | Degree of clockwise rotation to apply to the image. Rotation is limited to multiples of 90 degrees.(if no rotation is needed, just set it to 0) (0, 90, 180, 270, 360) | `number` | Yes |
| `responseUriFunc` | Callback function of URI. Returns URI of resized image's base64 format. ex: `uri => {console.log(uri)});` | `function` | Yes |
| `outputType` | Can be either **base64**, **blob** or **file**.(Default type is base64) | `string` | No |
| `minWidth` | New image min width (ratio is preserved, defaults to null) | `number` | No |
| `minHeight` | New image min height (ratio is preserved, defaults to null) | `number` | No |
### Input Argument Object

| Options object | Description | Type | Default | Required |
| ----------------- | ------------------------------------------------------------------------------------------------------------- | ----------- | ------- | -------- |
| `compressFormat` | Image format: **jpeg**, **png** or **webp**. | `string` | "jpeg" | No |
| `file` | Image File | `File` | | Yes |
| `maxHeight` | New image max height (ratio is preserved) | `number` | | Yes |
| `maxWidth` | New image max width (ratio is preserved) | `number` | | Yes |
| `minHeight` | New image min height (ratio is preserved unless minHeight === maxHeight) | `number` | | No |
| `minWidth` | New image min width (ratio is preserved unless minWidth === maxWidth) | `number` | | No |
| `outputType` | Output type: **base64**, **blob** or **file**. | `string` | "base64"| No |
| `quality` | A number between 0 and 100. Used for the JPEG compression. (100 = no compression) | `number` | 100 | No |
| `rotation` | Degree of clockwise rotation to apply to the image. Rotation is limited to 0, 90, 180, 270. (0 = no rotation) | `number` | 0 | No |

### Return

`imageFileResizer` returns a promise that resolves to type `string | File | Blob` depending on the `outputType` option.

## License

[MIT](https://opensource.org/licenses/mit-license.html)

## Publishing

```
npm run build
npm publish
```

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):
Expand Down
7 changes: 0 additions & 7 deletions babel.rc
View file
Open in desktop

This file was deleted.

45 changes: 0 additions & 45 deletions index.d.ts
View file
Open in desktop

This file was deleted.

Loading