https://github.com/baspa/react-uploadcare-transformations
React component for Uploadcare transformations
https://github.com/baspa/react-uploadcare-transformations
image-processing react reactjs uploadcare uploadcare-react
Last synced: 5 months ago
JSON representation
React component for Uploadcare transformations
- Host: GitHub
- URL: https://github.com/baspa/react-uploadcare-transformations
- Owner: Baspa
- License: mit
- Created: 2022-09-22T12:34:39.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-06-21T12:48:06.000Z (about 2 years ago)
- Last Synced: 2025-02-14T01:18:17.244Z (over 1 year ago)
- Topics: image-processing, react, reactjs, uploadcare, uploadcare-react
- Language: TypeScript
- Homepage:
- Size: 3.38 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-uploadcare-transformations
[](https://www.npmjs.com/package/react-uploadcare-transformations)
[](https://standardjs.com)
Show images that are transformed using [Uploadcare](https://uploadcare.com/?via=vk10) image processing URLs. No need to write or generate the URL yourself. Just pass the UUID of the file, optionally pass the custom CDN and add the transformations - through attributes - you want to apply and the React component generates the image for you.
> This package is inspired by the [PHP Uploadcare Transformations](https://github.com/vormkracht10/php-uploadcare-transformations) package. Be sure to check that out when using PHP. At this moment it has 13 more transformations available than this package, those will be available in this package soon.
- [Requirements](#requirements)
- [Installation](#installation)
- [Usage](#usage)
- [Documentation](#documentation)
* [Adding filename](#adding-filename)
* [Auto rotate](#auto-rotate)
* [Blur faces](#blur-faces)
* [Enhance](#enhance)
* [Flip](#flip)
* [Format](#format)
* [Grayscale](#grayscale)
* [Invert](#invert)
* [Miror](#miror)
* [Preview](#preview)
* [Progressive](#progressive)
* [Quality](#quality)
* [Rotate](#rotate)
* [Set fill](#set-fill)
* [Sharpen](#sharpen)
* [Zoom objects](#zoom-objects)
- [Testing](#testing)
- [Changelog](#changelog)
- [Contributing](#contributing)
- [Security Vulnerabilities](#security-vulnerabilities)
- [Credits](#credits)
- [License](#license)
## Requirements
- [React](https://reactjs.org/) 16.8.0 or higher
- [Uploadcare](https://uploadcare.com/?via=vk10) account
- [Node.js](https://nodejs.org/en/) 10.0.0 or higher
## Installation
```bash
npm install --save react-uploadcare-transformations
# or
yarn add react-uploadcare-transformations
```
## Usage
1. Include the `UCImage` component.
2. Get the UUID of the file you want to show.
3. Set your CDN url (optional).
4. Create the transformation URL by adding one or more transformations to the component. Simply add an object with the correct values. You can add as much transformation methods as you want.
5. The component outputs an image. Want to add your own classes to the image? Simply add the `classname` property!
```jsx
import React from 'react'
import { UCImage } from 'react-uploadcare-transformations'
const App = () => {
return (
)
}
export default App
```
### List of possible transformations
Each transformation follows the documentation on Uploadcare which you may find here.
The current list of possible transformations and where to find the documentation:
| Transformation | Uploadcare Documentation link |
| ------------- |:-------------:|
| [Auto rotate](#auto-rotate) | Link |
| [Blur faces](#blur-faces) | Link |
| [Enhance](#enhance) | Link |
| [Flip](#flip) | Link |
| [Format](#format) | Link |
| [Grayscale](#grayscale) | Link |
| [Invert](#invert) | Link |
| [Miror](#miror) | Link |
| [Preview](#preview) | Link |
| [Progressive](#progressive) | Link |
| [Quality](#quality) | Link |
| [Rotate](#rotate) | Link |
| [Set fill](#set-fill) | Link |
| [Sharpen](#sharpen) | Link |
| [Smart resize](#smart-resize) | Link |
| [Zoom objects](#zoom-objects) | Link |
## Documentation
### Adding filename
Original filenames can be accessed via Uploadcare's REST API. This can be done by making a request to receive a JSON response with file parameters including `original_filename`.
You can set an optional filename that users will see instead of the original name:
```jsx
import { UCImage } from 'react-uploadcare-transformations'
const = () => {
return (
)
}
```
### Auto rotate
The default behavior goes with parsing EXIF tags of original images and rotating them according to the “Orientation” tag. Using `false` as parameter allows turning off the default behavior.
```jsx
import { UCImage } from 'react-uploadcare-transformations'
const = () => {
return (
)
}
```
### Blur faces
When faces is specified the regions are selected automatically by utilizing face detection.
```jsx
import { UCImage } from 'react-uploadcare-transformations'
const = () => {
return (
)
}
```
### Enhance
Auto-enhances an image by performing the following operations: auto levels, auto contrast, and saturation sharpening.
Strength must be a number between 0 and 100. Default value is 50.
```jsx
import { UCImage } from 'react-uploadcare-transformations'
const = () => {
return (
)
}
```
### Flip
Flips images.
```jsx
import { UCImage } from 'react-uploadcare-transformations'
const = () => {
return (
)
}
```
### Format
Converts an image to one of the following formats: `jpg`, `png`, `webp`, `auto`.
```jsx
import { UCImage } from 'react-uploadcare-transformations'
const = () => {
return (
)
}
```
### Grayscale
Desaturates images. The operation has no additional parameters and simply produces a grayscale image output when applied.
```jsx
import { UCImage } from 'react-uploadcare-transformations'
const = () => {
return (
)
}
```
### Invert
Inverts images rendering a 'negative' of the input.
```jsx
import { UCImage } from 'react-uploadcare-transformations'
const = () => {
return (
)
}
```
### Mirror
Mirrors images.
```jsx
import { UCImage } from 'react-uploadcare-transformations'
const = () => {
return (
)
}
```
### Preview
Downscales an image proportionally to fit the given width and height in pixels.
```jsx
import { UCImage } from 'react-uploadcare-transformations'
const = () => {
return (
)
}
```
### Progressive
Returns a progressive image. In progressive images, data are compressed in multiple passes of progressively higher detail. The operation does not affect non-JPEG images; does not force image formats to JPEG.
```jsx
import { UCImage } from 'react-uploadcare-transformations'
const = () => {
return (
)
}
```
### Quality
Sets output JPEG and WebP quality. Since actual settings vary from codec to codec, and more importantly, from format to format, we provide five simple tiers and two automatic values which suits most cases of image distribution and are consistent.
Quality must be one of the following values: `smart`, `smart_retina`, `normal`, `better`, `best`, `lighter`, `lightest`.
```jsx
import { UCImage } from 'react-uploadcare-transformations'
const = () => {
return (
)
}
```
### Rotate
Right-angle image rotation, counterclockwise. The value of angle must be a multiple of 90.
```jsx
import { UCImage } from 'react-uploadcare-transformations'
const = () => {
return (
)
}
```
### Set fill
Sets the fill color used with crop, stretch or when converting an alpha channel enabled image to JPEG.
Color must be a hex color code without using the hashtag.
```jsx
import { UCImage } from 'react-uploadcare-transformations'
const = () => {
return (
)
}
```
### Sharpen
Sharpens an image, might be especially useful with images that were subjected to downscaling. strength can be in the range from 0 to 20 and defaults to the value of 5.
```jsx
import { UCImage } from 'react-uploadcare-transformations'
const = () => {
return (
)
}
```
### Smart resize
Content-aware resize helps retaining original proportions of faces and other visually sensible objects while resizing the rest of the image using intelligent algorithms.
```jsx
import { UCImage } from 'react-uploadcare-transformations'
const = () => {
return (
)
}
```
### Zoom objects
Zoom objects operation is best suited for images with solid or uniform backgrounds.
Zoom must be a number between 1 and 100.
```jsx
import { UCImage } from 'react-uploadcare-transformations'
const = () => {
return (
)
}
```
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
## Contributing
Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.
## Security Vulnerabilities
Please review [our security policy](../-/../-/security/policy) on how to report security vulnerabilities.
## Credits
- [Bas van Dinther](https://github.com/baspa)
- [All Contributors](../-/../-/contributors)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.