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:
// ES6 // CJSconst skaler = ;
The script can also be directly included from unpkg.com:
Usage
; /** * Assume 'input' is the value coming from an input field: * <input type="file" accept="image/*" id="input" > */ const input = documentfiles0; const file = await ;// ~> resized image as a File object - half the size const file = await ;// ~> resized image as a File object - 300px width const file = await ;// ~> resized image as a File object - stretched to 300x500px
API
skaler(file, options={})
Returns: File
<Promise>
Reutnrs promise that resolves to the resized File
object.
Note:The new files has an updated
last modified time
property.
file
Type: File
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:
let file = await ;// ~> output is half the size of the orignal
Note: The
width
andheight
options are ignored ifscale
is provided.
options.width
Type: number
Scale to a specific width. The file keeps it aspect ratio.
let file = await ;// ~> output is 200px width
Note: The image can become stretched if both
width
andheight
are provided at the same time.
options.height
Type: number
Scale to a specific height. The file keeps it aspect ratio.
let file = await ;// ~> output is 200px width
Note: The image can become stretched if both
width
andheight
are provided at the same time.
options.name
Type: string
Rename file during resizing. Defaults to the name of the input 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
.
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