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:
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 meta data.
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 Thumbnail.
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:
Scaling megapixel images in iOS (iPhone, iPad, iPod) can result in distorted (squashed) images.
The Load Image iOS scaling fixes extension resolves these issues.