A JavaScript library to load and transform image files.

• Demo
• Description
• Setup
• Usage
• Image loading
• Image scaling
• Requirements
• API
• Options
• Meta data parsing
• Exif parser
• iOS scaling fixes
• License
• Credits

JavaScript Load Image Demo

JavaScript Load Image is a library to load images provided as File or Blob 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.

Include the (minified) JavaScript Load Image script in your HTML markup:

<script src="js/load-image.min.js"></script>

Or alternatively, choose which components you want to include:

<script src="js/load-image.js"></script>
<script src="js/load-image-ios.js"></script>
<script src="js/load-image-orientation.js"></script>
<script src="js/load-image-meta.js"></script>
<script src="js/load-image-exif.js"></script>
<script src="js/load-image-exif-map.js"></script>

In your application code, use the loadImage() function like this:

document.getElementById('file-input').onchange = function (e) {
    loadImage(
        e.target.files[0],
        function (img) {
            document.body.appendChild(img);
        },
        {maxWidth: 600} // Options
    );
};

It is also possible to use the image scaling functionality with an existing image:

var scaledImage = loadImage.scale(
    img, // img or canvas element
    {maxWidth: 600}
);