Introduction

Resize the image and get the resized image in various formats such as Base64, Blob, image elements and so on.

Installation

Install with npm:

npm install --save js-scissor

Usage

See how to use js-scissor in the browser.

Resize width.

import Scissor from 'js-scissor';

// HTML: <img id="src1" src="img/sample1.jpg">
//       <img id="dest1">
let src = document.querySelector('#src1');
let dest = document.querySelector('#dest1');
dest.src = (await new Scissor(src).resize(100)).toBase64();

Resize height.

import Scissor from 'js-scissor';

// HTML: <img id="src2" src="img/sample2.png">
//       <img id="dest2">
let src = document.querySelector('#src2');
let dest = document.querySelector('#dest2');
dest.src = (await new Scissor(src).resize(null, 100)).toBase64();

Resize by specifying width and height (cover)

Resize so that the center is cut off while maintaining the aspect ratio.

import Scissor from 'js-scissor';

// HTML: <img id="src3" src="img/sample1.jpg">
//       <img id="dest3">
let src = document.querySelector('#src3');
let dest = document.querySelector('#dest3');
dest.src = (await new Scissor(src).resize(100, 225, {fit: 'cover'})).toBase64();

Resize by specifying width and height (contain)

Resize to fit the specified size while maintaining the aspect ratio.Blank areas are filled with the background color (default is black).

import Scissor from 'js-scissor';

// HTML: <img id="src4" src="img/sample1.jpg">
//       <img id="dest4">
let src = document.querySelector('#src4');
let dest = document.querySelector('#dest4');
dest.src = (await new Scissor(src).resize(100, 225, {fit: 'contain'})).toBase64();

Resize by specifying width and height (fill)

Resize to the specified size without keeping the aspect ratio.

import Scissor from 'js-scissor';

// HTML: <img id="src5" src="img/sample1.jpg">
//       <img id="dest5">
let src = document.querySelector('#src5');
let dest = document.querySelector('#dest5');
dest.src = (await new Scissor(src).resize(100, 225)).toBase64();

Resize the image read from the URL.

import Scissor from 'js-scissor';

// HTML: <img src="img/sample2.png">
//       <img id="dest6">
let dest = document.querySelector('#dest6');
dest.src = (await new Scissor('img/sample2.png').resize(100, 225, {fit: 'cover'})).toBase64();

Class Scissor

This is a class that receives an image element, canvas element, and image URL in the constructor and outputs the edited result of the received image data.

Methods

Method Description
public constructor(target: HTMLImageElement|HTMLCanvasElement|string)

Constructs a Scissor object.

Params:

  • {HTMLImageElement|HTMLCanvasElement|string} target HTMLImageElement, HTMLCanvasElement, image URL, image in DataURL format.

Example:

import Scissor from 'js-scissor';

let siz;

// Specify an image element for editing.
// HTML: <img id="img" src="img/sample1.jpg">
siz = new Scissor(document.querySelector('#img'));

// Specify a canvas element for editing.
// HTML: <canvas id="cvs"></canvas>
siz = new Scissor(document.querySelector('#cvs'));

// Specify the image URL for editing.
siz = new Scissor('img/sample1.jpg');
siz = new Scissor('https://example.com/img/sample1.jpg');
public async resize( width: number|null, height?: number|null, opts?: { fit?: 'fill'|'cover'|'contain', background?: string, format?: 'image/webp'|'image/png'|'image/jpeg' } ): Promise<Output>

Resizes the image and returns an "Output" object that can retrieve the resized image data in various formats.

Params:

  • {number|null} width Resize width. If the width is omitted, the height of the parameter is required.
  • {number|null} height Resize height. If the height is omitted, the parameter width is required.
  • {'fill'|'cover'|'contain'} options.fit Image embedding method in the area after resizing, default is 'fill'.
  • {string} options.background Background color, default is '#000'.
  • {'image/webp'|'image/png'|'image/jpeg'} options.format Image format after resizing, default is 'image/png'.

Return:

{Promise<Output>} Returns an "output" object that can retrieve resized image data in various formats.

Example:

import Scissor from 'js-scissor';

const siz = new Scissor('https://example.com/img/sample2.png');
let res, base64;

// Resize width.
res = await siz.resize(100);
base64 = res.toBase64();// Get the resized image as base64.

// Resize height.
res = await siz.resize(null, 100);
base64 = res.toBase64();// Get the resized image as base64.

// Resize by specifying width and height (cover)
// Resize so that the center is cut off while maintaining the aspect ratio.
res = await siz.resize(100, 225, {fit: 'cover'});
base64 = res.toBase64();// Get the resized image as base64.

// Resize by specifying width and height (contain)
// Resize to fit the specified size while maintaining the aspect ratio.
res = await siz.resize(100, 225, {fit: 'contain'});
base64 = res.toBase64();// Get the resized image as base64.

// Resize by specifying width and height (fill)
// Resize to the specified size without keeping the aspect ratio.
res = await siz.resize(100, 225);
base64 = res.toBase64();// Get the resized image as base64.

Class Output

A class that converts resized images into various formats.

Methods

Method Description
public constructor(cvs: HTMLCanvasElement, format: 'image/webp'|'image/png'|'image/jpeg')

Constructs a Output object.

Params:

  • {HTMLCanvasElement} cvs Converted image canvas element.
  • {'image/webp'|'image/png'|'image/jpeg'} format Image format after resizing.
public toBase64(): string

Returns the resized image in base64 format.

Return:

{string} Base64 data of the image after resizing, e.g. data:image/png;base64, iVB...

Example:

import Scissor from 'js-scissor';

const siz = new Scissor('https://example.com/img/sample2.png');
const res = await siz.resize(100);
const base64 = res.toBase64();
public toImage(): HTMLImageElement

Returns the resized image as an image element.

Return:

{HTMLImageElement} The image element of the resized image.

Example:

import Scissor from 'js-scissor';

const siz = new Scissor('https://example.com/img/sample2.png');
const res = await siz.resize(100);
const img = res.toImage();
public toBlob(): Blob

Returns the blob data for the resized image.

Return:

{Blob} Blob data for resized images.

Example:

import Scissor from 'js-scissor';

const siz = new Scissor('https://example.com/img/sample2.png');
const res = await siz.resize(100);
const blob = res.toBlob();