skaler

skaler copied to clipboard

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
import skaler from 'skaler'

// CJS
const skaler = require('skaler');

The script can also be directly included from unpkg.com:

<script src="https://unpkg.com/skaler"></script>

Usage

import skaler from 'skaler';

/**
 * Assume 'input' is the value coming from an input field:
 * <input type="file" accept="image/*" id="input" >
 */

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 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 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.

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.

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.

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