skaler
v1.0.7
A 329B client-side image resizer.
0/weekUpdated 3 years agoMITUnpacked: 8.3 KB
Published by terkelg
npm install skaler
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:
Include skaler:
`js
// ES6
import skaler from 'skaler'
// CJS
const skaler = require('skaler');
`
The script can also be directly included from 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
$3
Returns: File
<_Promise_>File object.> Note:The new files has an updated
last modified time property.#### file
Type:
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 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
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
and height are provided at the same time.$3
Type: string
Rename file during resizing. Defaults to the name of the input
.$3
Type: String
A
representing the MIME type of the content that will be put into the file. Defaults to a value of the input 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