Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

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

tree: 46baf0c85f

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 test
Octocat-spinner-32 .gitignore Use a .gitignore file instead of the files field in package.json. February 15, 2012
Octocat-spinner-32 Makefile
Octocat-spinner-32 README.md
Octocat-spinner-32 index.html
Octocat-spinner-32 load-image.js
Octocat-spinner-32 load-image.min.js
Octocat-spinner-32 package.json
README.md

JavaScript Load Image

Demo

JavaScript Load Image Demo

Usage

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

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

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

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

Requirements

The JavaScript Load Image function has zero dependencies.

However, JavaScript Load Image is a very suitable complement to the Canvas to Blob function.

API

The loadImage() function accepts a File or Blob object or a simple image URL (e.g. "http://example.org/image.png") as first argument.

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:

document.getElementById('file-input').onchange = function (e) {
    var loadingImage = window.loadImage(
        e.target.files[0],
        function (img) {
            document.body.appendChild(img);
        },
        {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:

document.getElementById('file-input').onchange = function (e) {
    var loadingImage = window.loadImage(
        e.target.files[0],
        function (img) {
            document.body.appendChild(img);
        },
        {maxWidth: 600}
    );
    loadingImage.onload = loadingImage.onerror = 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 = "http://example.org/image.png";
window.loadImage(
    imageUrl,
    function (img) {
        if(img.type === "error") {
            console.log("Error loading image " + imageUrl);
        } else {
            document.body.appendChild(img);
        }
    },
    {maxWidth: 600}
);

The optional third argument is a map of options:

  • maxWidth: Defines the maximum width of the img/canvas element.
  • maxHeight: Defines the maximum height of the img/canvas element.
  • minWidth: Defines the minimum width of the img/canvas element.
  • minHeight: Defines the minimum height of the img/canvas element.
  • canvas: Defines if the returned element should be a canvas element.

They can be used the following way:

window.loadImage(
    fileOrBlobOrUrl,
    function (img) {
        document.body.appendChild(img);
    },
    {
        maxWidth: 600,
        maxHeight: 300,
        minWidth: 100,
        minHeight: 50,
        canvas: true
    }
);

All options are optional. By default, the image is returned as HTML img element without any image size restrictions.

License

The JavaScript Load Image script is released under the MIT license.

Something went wrong with that request. Please try again.