2.0.1 • Published 4 years ago
nailit v2.0.1
nailIt
Easily generate thumbnails on the client-side. Works well with React. TypeScript is supported.
Why?
Client-side thumbnail generation:
- reduces server load - image processing being typically one of the most CPU expensive tasks in image storage systems,
- allows for end to end encryption of thumbnails along with the original images,
- allows for easy usage within Electron without relying on external tools like Imagemagick.
Usage
nailIt(imageUrl, options, outputBlob)| Argument | Default value | Description |
|---|---|---|
| imageUrl | None | An URL to the image, can't come from a foreign origin without CORS. |
| options | {} | See Options below. |
| outputBlob | false | When set to true the function will resolve with a Blob containing the thumbnail, otherwise it'll resolve with a data URI. |
The function returns a promise that resolves to either a Blob or a data URI based on the outputBlob argument.
Options
| Argument | Default value | Description |
|---|---|---|
| maxSize | 250 | Maximum width or height. The image will be resized to have both width and height be less or equal to this value. |
| cover | false | When set to true the image will be constrained to aspect ratio 1:1 and centered. |
| outputType | image/jpeg | Can be set to any mimetype supported by <canvas>. |
| outputQuality | 0.7 | Smaller values result in smaller file sizes. |
Installation
npm: npm install nailit
yarn: yarn add nailit
Example
import nailIt from 'nailit';
async function example() {
// You can use any URL that can be used as a src="" inside of an <img> tag.
// Images from a foreign origin (with no or an improper Access-Control-Allow-Origin configuration) will result in a SecurityError being thrown.
let url = await nailIt('./photo.jpg');
// The result is a data URL that can be used with an <img> element as well.
}