scale-crop-rotate v1.0.4
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-rotateor
yarn add scale-crop-rotateSyntax
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
Event loop: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop "JavaScript has a concurrency model based on an \"event loop\". This model is quite different from models in other languages like C and Java."