Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/terkelg/skaler
A (329B) client-side image resizer.
https://github.com/terkelg/skaler
dom files forms images input resize scale
Last synced: about 1 month ago
JSON representation
A (329B) client-side image resizer.
- Host: GitHub
- URL: https://github.com/terkelg/skaler
- Owner: terkelg
- License: mit
- Created: 2019-03-28T03:27:43.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-03-15T15:45:45.000Z (almost 5 years ago)
- Last Synced: 2024-10-28T13:10:56.470Z (about 2 months ago)
- Topics: dom, files, forms, images, input, resize, scale
- Language: JavaScript
- Homepage:
- Size: 132 KB
- Stars: 91
- Watchers: 3
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
A 329B client-side image resizer
Skaler is a simple and small tool to scale images client-side.
It's ideal when all you want to do is to scale user submitted images before uploading to your server.
Save storage space, bandwidth and reduce server load by scaling images client side before uploading.
**~~lack of~~ Features**
- Tiny
- Vanilla JS
- Zero Dependencies
## Install
```
$ npm install skaler
```
This module exposes two module definitions:
* **ES Module**: `dist/skaler.mjs`
* **UMD**: `dist/skaler.umd.js`
Include skaler:
```js
// ES6
import skaler from 'skaler'
// CJS
const skaler = require('skaler');
```
The script can also be directly included from [unpkg.com](https://unpkg.com):
```html
```
## Usage
```js
import skaler from 'skaler';
/**
* Assume 'input' is the value coming from an input field:
*
*/
const input = document.getElementById('#input').files[0];
const file = await skaler(input, { scale: 0.5 });
// ~> resized image as a File object - half the size
const file = await skaler(input, { width: 300 });
// ~> resized image as a File object - 300px width
const file = await skaler(input, { width: 300, height: 500 });
// ~> resized image as a File object - stretched to 300x500px
```
## API
### skaler(file, options={})
Returns: `File` <_Promise_>
Reutnrs promise that resolves to the resized [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) object.
> **Note**:The new files has an updated ` last modified time` property.
#### file
Type: `File`
[`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) object to be resized.
This is what input elements of type `file` returns.
> **Note**: The file is expected to be of type image.
#### options.scale
Type: `number`
Scale based on relative percentage. Example:
```js
let file = await skaler(input, { scale: 0.5 });
// ~> output is half the size of the orignal
```
> **Note**: The `width` and `height` options are ignored if `scale` is provided.
#### options.width
Type: `number`
Scale to a specific width. The file keeps it aspect ratio.
```js
let file = await skaler(input, { width: 200 });
// ~> output is 200px width
```
> **Note**: The image can become stretched if both `width` and `height` are provided at the same time.
#### options.height
Type: `number`
Scale to a specific height. The file keeps it aspect ratio.
```js
let file = await skaler(input, { width: 200 });
// ~> output is 200px width
```
> **Note**: The image can become stretched if both `width` and `height` are provided at the same time.
### options.name
Type: `string`
Rename file during resizing. Defaults to the name of the input [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File).
### options.type
Type: `String`
A `string` representing the `MIME` type of the content that will be put into the file. Defaults to a value of the input [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File).
## Future
I'd plan to optimize for even better performacne and smaller code using `offscreenCanvas` and `workers` in the future as browser support gets better. I also considered `createImageBitmap()` but it's currently not supported in Safari.
## License
MIT © [Terkel Gjervig](https://terkel.com)