image-blobber

A small module for reading image file base64/dimensions, and scaling them to a max height or width.

Installation

image-blobber can be installed from npm.

npm install --save image-blobber

//ES6
import * as imageblobber from "image-blobber";

//Node-style require
const imageblobber = require("image-blobber");

Usage

All image-blobber functions are promisified.

Supported: boolean

An exported boolean that indicates whether the current environment supports the FileReader needed by the getFileBlobs function. If false, getFileBlobs will throw an error.

import {Supported} from "image-blobber";

if (!Supported)
{
    throw new Error("Your browser does not support the FileReader API.");
}

getFileBlobs(input: HtmlInputElement): Promise<File[]>

Gets all file blobs for an HTML5 file input element.

import {getFileBlobs} from "image-blobber";

const input = document.getElementById("my-file-input");

getFileBlobs(input).then((blobs) =>
{
    console.log(blobs.length); // 3
});

getBase64(file: File): Promise<BlobDetails>

Gets the base64 string, filename and dimensions for the given image file. See below for the BlobDetails interface.

import {getBase64} from "image-blobber";

const file: File = ...;

getBase64(file).then((details) =>
{
    console.log(details.filename);   // "my-file.png"
    console.log(details.base64);     // "data:image/png;base64,..."
    console.log(details.dimensions); // { height: 150, width: 75 }
});

scaleBase64(base64: string, options: ScaleOptions): Promise<ScaleResult>

Scales a base64 image string according to the options passed in. See below for the ScaleOptions and ScaleResult interfaces.

import {scaleBase64} from "image-blobber";

const base64: string = ...;

scaleBase64(base64, {height: 400, width: 400, preserveRatio: true}).then((scaledImage) =>
{
    console.log(scaledImage.scaledBase64);     // "data:image/png;base64,..."
    console.log(scaledImage.scaledDimensions); // { height: 150, width: 75 }
});

Tie it all together

import * as Promise from "bluebird";
import * as blobber from "file-blobber";

const input = document.querySelector("input") as HTMLInputElement;

blobber.getFileBlobs(input)
    .then((blobs) =>
    {
        return Promise.all(blobs.map(blob => blobber.getBase64(blob)));
    })
    .then((images) =>
    {
        return Promise.all(images.map(i => blobber.scaleBase64(i.base64, {height: 400, width: 400, preserveRatio: true})));
    })
    .then((scaledImages) =>
    {
        // Do something with the scaled images.
    })

Interfaces

The following interfaces are used or returned at some point by image-blobber. If you're using Typescript, the compiler should automatically pick up these definitions when image-blobber is installed.

Dimensions

| Property | Type | Comments | | -------- | ---- | -------- | | height | number | The image's height. | | width | number | The image's width. |

BlobDetails

| Property | Type | Comments | | -------- | ---- | -------- | | filename | string | The name of the file as it appears on the user's machine. | | base64 | string | A base64 string representing the image. Can be set as an <img /> element's src. | | dimensions | Dimensions | The image's height and width dimensions. |

ScaleResult

| Property | Type | Comments | | -------- | ---- | -------- | | scaledBase64 | string | A base64 string representing the scaled image. Can be set as an <img /> element's src. | | scaledDimensions | Dimensions | The scaled image's new height and width dimensions. |

ScaleOptions

| Property | Type | Comments | | -------- | ---- | -------- | | height | number | The maximum height allowed for a scaled image. Optional, but options must include either a height or width. | | width | number | The maximum width allowed for a scaled image. Optional, but options must include either a height or width. | | preserveRatio | boolean | Whether aspect ratio should be preserved. If true, image will be scaled to an aspect ratio that satisfies both height and width. Default true. |