Scale, crop and rotate images, not blocking UI. :construction::collision:

import scaleCropRotate, { imageDataToDataURL, URLToImageData } from 'scale-crop-rotate';

const progress = document.getElementsByTagName('progress')[0];

const resizeImage = async (imageURL, width, height) => {
  try {
    const data = await URLToImageData(imageURL);
    const resultData = await scaleCropRotate(data, width, height)
      .progress(value => {
        progress.value = value;
      });
    
    const image = new Image;
    image.src = imageDataToDataURL(resultData);
    document.body.append(image);
  }
  catch(e) {
    console.error(e);
  }
}

resizeImage(
  '/assets/beautiful-landscape.jpg',
  384, 
  190
);

UI unblock

Image processing is an intensive CPU time consumption job. The data is processed in a very big loop inside the same Event loop iteration and, done in browser, may cause significant UI hickups. The solution may be to perform image processing in other thread with the help of the WebWorker. However it is possible to avoid blocking the UI thread by performing the work in range of many Event loop iterations.

This function reserves 10ms of every Event loop iteration to process data.

Performance

This function uses the technique, proposed by Paul Rouget in his article about pixel manipulation with Typed Arrays. His method reduces the number of read/write operations to the ArrayBuffer of the ImageData returned by the CanvasRenderingContext2D.getImageData() method. It saves the overall processing time when iterating through every pixel in the image.

The usage of Math is avoided in favour of Bitwise operators, giving a significant boost in performance in some browsers.

To save even more memory and time, scaling, cropping and rotating operations are performed in scope of the same loop.

Install

npm i scale-crop-rotate

or

yarn add scale-crop-rotate

Syntax

scaleCropRotate(source[, width, height[, cropX, cropY, cropWidth, cropHeight[, rotate[, enableSyncMode]]]]);
scaleCropRotate(source[, width, height[, rotate[, enableSyncMode]]]);
scaleCropRotate(source[, cropX, cropY, cropWidth, cropHeight[, rotate[, enableSyncMode]]]);
scaleCropRotate(source[, rotate[, enableSyncMode]]);

Parameters

source

The source image data, should be an instance of the ImageData.

width

A Number indicating width of the resulting image. If the value is 0, the width is adapted to keep the same aspect ratio as in the source image.

height

A Number indicating height of the resulting image. If the value is 0, the height is adapted to keep the same aspect ratio as in the source image.

cropX

A Number indicating distance from the left side of the source image to draw into the destination context. This allows to crop the source image from the left side. The default value is calculated to position the cropping area in center of the source image.

cropY

A Number indicating distance from the top side of the source image to draw into the destination context. This allows to crop the source image from the top side. The default value is calculated to position the cropping area in center of the source image.

cropWidth

A Number indicating the width of the area that will be transfered from the source image to the destination image. The default value is calculated to position the cropping area in center of the source image.

cropHeight

A Number indicating the height of the area that will be transfered from the source image to the destination image. The default value is calculated to position the cropping area in center of the source image.

rotate

A Number representing the Exif Orientation Tag, or a DOMString containig one of predefined rotation values: 90deg, 180deg, 270deg, horizontal, vertical. Last two predefined values allow to mirror image horizontally and vertically.

enableSyncMode

A Boolean switch forces function to work in syncronous mode. In this case funcion overall execution time is faster, but it blocks the UI.

Return values

Async mode

A Promise that resolves with an ImageData containing the resulting image. A Promise is extended with the .progress() method that recieves a function as an argument to handle the image processing progress.

Sync mode

An ImageData containing the resulting image.

Helper functions

To retrieve an ImageData out of different conventional data sources, use these functions:

blobToImageData

Retrieves an ImageData from a Blob object.

Syntax

scaleCropRotate.blobToImageData(object);

Parameters

object

A Blob object to retrieve an ImageData from.

Return value

A Promise that resolves with an ImageData.

imageDataToBlob

Converts an ImageData to a Blob object.

Syntax

scaleCropRotate.imageDataToBlob(object);

Parameters

object

An ImageData object to convert to a Blob object.

Return value

A Promise that resolves with a Blob object.

imageDataToDataURL

Converts an ImageData to a data URI string.

Syntax

scaleCropRotate.imageDataToDataURL(object);

Parameters

object

An ImageData object to convert to a data URI.

Return value

A DOMString containing the processed data URI.

imageToImageData

Retrieves an ImageData from HTMLImageElement object.

Syntax

scaleCropRotate.imageToImageData(object);

Parameters

object

An HTMLImageElement object to retrieve an ImageData from.

Return value

A Promise that resolves with an ImageData.

URLToImageData

Loads an image from the given URI and retrieves an ImageData.

Syntax

scaleCropRotate.URLToImageData(URIString);

Parameters

URIString

A DOMString containing the URI linking to the image to retrieve an ImageData from.

Return value

A Promise that resolves with an ImageData.

Other libraries

Check other great libraries to do in-browser image resizing:

• pica is great image resizing tool with support of WebWorkers and WebAssembly from the box
• Hermite-resize does image resize/resample using Hermite filter and WebWorkers

License

MIT