objects or via URL.
It returns an optionally scaled and/or cropped HTML img or canvas element via an asynchronous callback.
It also provides a method to parse image meta data to extract Exif tags and thumbnails and to restore the complete image header after resizing.
Or alternatively, choose which components you want to include:
In your application code, use the loadImage() function like this:
documentgetElementById'file-input'loadImageetargetfiles0documentbodyappendChildimg;maxWidth: 600 // Options;;
It is also possible to use the image scaling functionality with an existing image:
var scaledImage = loadImagescaleimg // img or canvas elementmaxWidth: 600;
If a File or
Blob is passed as parameter, it
returns a HTML img element if the browser supports the
URL API or a
FileReader object if
supported, or false.
It always returns a HTML img element when passing an image URL:
documentgetElementById'file-input'var loadingImage = loadImageetargetfiles0documentbodyappendChildimg;maxWidth: 600;if !loadingImage// Alternative code ...;
The img element or FileReader object returned by the loadImage() function allows to abort the loading process by setting the onload and onerror event handlers to null:
documentgetElementById'file-input'var loadingImage = loadImageetargetfiles0documentbodyappendChildimg;maxWidth: 600;loadingImageonload = loadingImageonerror = null;;
The second argument must be a callback function, which is called when the image has been loaded or an error occurred while loading the image. The callback function is passed one argument, which is either a HTML img element, a canvas element, or an Event object of type error:
var imageUrl = "";loadImageimageUrlifimgtype === "error"console.log"Error loading image " + imageUrl;elsedocumentbodyappendChildimg;maxWidth: 600;
The optional third argument to loadImage() is a map of options:
aspectRatioalso enables the
window.devicePixelRatiounless the scaled image is not rendered on screen.
0.5, each step scales the image to half the size, before reaching the target dimensions.
cropoption also enables the
orientationalso enables the
They can be used the following way:
loadImagefileOrBlobOrUrldocumentbodyappendChildimg;maxWidth: 600maxHeight: 300minWidth: 100minHeight: 50canvas: true;
All settings are optional. By default, the image is returned as HTML img element without any image size restrictions.
If the Load Image Meta extension is included, it is also possible to parse image
The extension provides the method loadImage.parseMetaData, which can be used the following way:
loadImageparseMetaDatafileOrBlobif !dataimageHeadreturn;// Combine data.imageHead with the image body of a resized file// to create scaled images with the original image meta data, e.g.:var blob =dataimageHead// Resized images always have a head size of 20 bytes,// including the JPEG marker and a minimal JFIF header:loadImageblobSlicecallresizedImage 20type: resizedImagetype;maxMetaDataSize: 262144disableImageHead: false;
The third argument is an options object which defines the maximum number of bytes to parse for the image meta data, allows to disable the imageHead creation and is also passed along to segment parsers registered via loadImage extensions, e.g. the Exif parser.
Blob objects of resized images can be created via canvas.toBlob().
If you include the Load Image Exif Parser extension, the parseMetaData
callback data contains the additional property exif if Exif data could
be found in the given image.
The exif object stores the parsed Exif tags:
var orientation = dataexif0x0112;
It also provides an exif.get() method to retrieve the tag value via the tag's mapped name:
var orientation = dataexifget'Orientation';
By default, the only available mapped names are Orientation and
If you also include the Load Image Exif Map library, additional tag mappings become available, as well as two additional methods, exif.getText() and exif.getAll():
var flashText = dataexifgetText'Flash'; // e.g.: 'Flash fired, auto mode',// A map of all parsed tags with their mapped names as keys and their text values:var allTags = dataexifgetAll;
The Exif parser also adds additional options for the parseMetaData method, to disable certain aspects of the parser: