Skip to content

JavaScript Load Image is a function to load images provided as File or Blob objects or via URL. It returns an optionally scaled HTML img or canvas element.

Notifications You must be signed in to change notification settings

f2er/JavaScript-Load-Image

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

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.

It returns true if the browser supports the required APIs for loading the image file. This is true for all browsers when passing an image URL, else it is true if the browser supports the URL or FileReader API:

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

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.

About

JavaScript Load Image is a function to load images provided as File or Blob objects or via URL. It returns an optionally scaled HTML img or canvas element.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published