Inbrowser scale, crop and rotate images, without blocking the Event loop.

import scaleCropRotate, {
  blobToImageData,
  imageDataToBlob
} from "scale-crop-rotate";

const formData = new FormData();

const onFileChange = async fileBlob => {
  const imageData = await blobToImageData(fileBlob);
  const resultData = await scaleCropRotate(imageData, 600, 600);
  const resultBlob = await imageDataToBlob(resultData);

  formData.set("userpic", resultBlob, fileBlob.name);
};

const onFormSubmit = () => {
  var request = new XMLHttpRequest();
  request.open("POST", "https://myapp.foo/form");
  request.send(formData);
};

<form onsubmit="onFormSubmit()">
  <input type="file" accept="image/*" onchange="onFileChange(this.files[0])" />
</form>

Prevent blocking the Event loop

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

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.

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 containing 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

• In 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.

• In 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