Net Possibility Multiplier

    skaler

    1.0.7 • Public • Published

    skaler

    version gzip size license dependencies

    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

    Install

    npm i skaler

    DownloadsWeekly Downloads

    438

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    8.32 kB

    Total Files

    6

    Last publish

    Collaborators

    • terkelg