Image Resize Using JavaScript And Canvas – Morpheus Image Resize

Preview:

Description:

Morpheus Image Resize is an ES6 JavaScript library used to resize an image to a specific width/height using JavaScript and Canvas.

You can also set the scale level while resizing to maintain the regular aspect ratio.

ideal for image (file) uploader that enables the user to resize and crop large images before uploading.

How to use it:

Install the Morpheus Image Resize package.

# NPM
$ npm install morpheus-image-resize --save

Import the Morpheus from the package.

import Morpheus from 'morpheus-image-resize';

Initialize the library and specify the width/height/scale.

Morpheus.resize('image.jpg', {
  height: 100,
  width: 100,
  scale: 50
})

Display the resized image on the webpage.

Morpheus.resize('image.jpg', {
  height: 100,
  width: 100,
  scale: 50
})
.then(canvas => Morpheus.toImage(canvas))
.then(image => {
  document.body.appendChild(image);
});

Convert the given canvas element to an image element.

@returns {Promise}
toImage(canvas)

Convert the given canvas element to a file. Optionally, the file name can be set.

@returns {Promise}
toFile(canvas, fileName='morpheus')

Converts the given canvas element to blob.

@returns {Promise}
toBlob(canvas)

Convert the given canvas element to base64 code.

@returns {Promise}
toBase64(canvas)