Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

image-blobber

Package Overview
Dependencies
0
Maintainers
1
Versions
4
Issues
File Explorer

Advanced tools

image-blobber

A small module for reading HTML5 image file blobs.

    1.2.0latest

Version published
Maintainers
1
Yearly downloads
9,585
increased by3764.92%

Weekly downloads

Readme

Source

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

PropertyTypeComments
heightnumberThe image's height.
widthnumberThe image's width.

BlobDetails

PropertyTypeComments
filenamestringThe name of the file as it appears on the user's machine.
base64stringA base64 string representing the image. Can be set as an <img /> element's src.
dimensionsDimensionsThe image's height and width dimensions.

ScaleResult

PropertyTypeComments
scaledBase64stringA base64 string representing the scaled image. Can be set as an <img /> element's src.
scaledDimensionsDimensionsThe scaled image's new height and width dimensions.

ScaleOptions

PropertyTypeComments
heightnumberThe maximum height allowed for a scaled image. Optional, but options must include either a height or width.
widthnumberThe maximum width allowed for a scaled image. Optional, but options must include either a height or width.
preserveRatiobooleanWhether aspect ratio should be preserved. If true, image will be scaled to an aspect ratio that satisfies both height and width. Default true.

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc