PHPackages                             silvestra/javascript-load-image - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. silvestra/javascript-load-image

ActiveComponent

silvestra/javascript-load-image
===============================

010JavaScript

Since Sep 16Pushed 11y ago1 watchersCompare

[ Source](https://github.com/Silvestra/JavaScript-Load-Image)[ Packagist](https://packagist.org/packages/silvestra/javascript-load-image)[ RSS](/packages/silvestra-javascript-load-image/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

JavaScript Load Image
=====================

[](#javascript-load-image)

> A JavaScript library to load and transform image files.

Table of contents
-----------------

[](#table-of-contents)

- [Demo](#demo)
- [Description](#description)
- [Setup](#setup)
- [Usage](#usage)
- [Image loading](#image-loading)
- [Image scaling](#image-scaling)
- [Requirements](#requirements)
- [API](#api)
- [Options](#options)
- [Meta data parsing](#meta-data-parsing)
- [Exif parser](#exif-parser)
- [iOS scaling fixes](#ios-scaling-fixes)
- [License](#license)
- [Credits](#credits)

Demo
----

[](#demo)

[JavaScript Load Image Demo](https://blueimp.github.io/JavaScript-Load-Image/)

Description
-----------

[](#description)

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.

Setup
-----

[](#setup)

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

```

```

Or alternatively, choose which components you want to include:

```

```

Usage
-----

[](#usage)

### Image loading

[](#image-loading)

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
    );
};
```

### Image scaling

[](#image-scaling)

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}
);
```

Requirements
------------

[](#requirements)

The JavaScript Load Image library has zero dependencies.

However, JavaScript Load Image is a very suitable complement to the [Canvas to Blob](https://github.com/blueimp/JavaScript-Canvas-to-Blob) library.

API
---

[](#api)

The **loadImage()** function accepts a [File](https://developer.mozilla.org/en/DOM/File) or [Blob](https://developer.mozilla.org/en/DOM/Blob) object or a simple image URL (e.g. `'https://example.org/image.png'`) as first argument.

If a [File](https://developer.mozilla.org/en/DOM/File) or [Blob](https://developer.mozilla.org/en/DOM/Blob) is passed as parameter, it returns a HTML **img** element if the browser supports the [URL](https://developer.mozilla.org/en/DOM/window.URL) API or a [FileReader](https://developer.mozilla.org/en/DOM/FileReader) object if supported, or **false**.
It always returns a HTML [img](https://developer.mozilla.org/en/docs/HTML/Element/Img) element when passing an image URL:

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

The **img** element or [FileReader](https://developer.mozilla.org/en/DOM/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 = 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](https://developer.mozilla.org/en/HTML/Canvas) element, or an [Event](https://developer.mozilla.org/en/DOM/event) object of type **error**:

```
var imageUrl = "https://example.org/image.png";
loadImage(
    imageUrl,
    function (img) {
        if(img.type === "error") {
            console.log("Error loading image " + imageUrl);
        } else {
            document.body.appendChild(img);
        }
    },
    {maxWidth: 600}
);
```

Options
-------

[](#options)

The optional third argument to **loadImage()** 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.
- **sourceWidth**: The width of the sub-rectangle of the source image to draw into the destination canvas.
    Defaults to the source image width and requires *canvas: true*.
- **sourceHeight**: The height of the sub-rectangle of the source image to draw into the destination canvas.
    Defaults to the source image height and requires *canvas: true*.
- **top**: The top margin of the sub-rectangle of the source image.
    Defaults to 0 and requires *canvas: true*.
- **right**: The right margin of the sub-rectangle of the source image.
    Defaults to 0 and requires *canvas: true*.
- **bottom**: The bottom margin of the sub-rectangle of the source image.
    Defaults to 0 and requires *canvas: true*.
- **left**: The left margin of the sub-rectangle of the source image.
    Defaults to 0 and requires *canvas: true*.
- **contain**: Scales the image up/down to contain it in the max dimensions if set to *true*.
    This emulates the CSS feature [background-image: contain](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#contain).
- **cover**: Scales the image up/down to cover the max dimensions with the image dimensions if set to *true*.
    This emulates the CSS feature [background-image: cover](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#cover).
- **aspectRatio**: Crops the image to the given aspect ratio (e.g. `16/9`).
    This feature assumes *crop: true*.
- **crop**: Crops the image to the maxWidth/maxHeight constraints if set to *true*.
    This feature assumes *canvas: true*.
- **orientation**: Allows to transform the canvas coordinates according to the EXIF orientation specification.
    This feature assumes *canvas: true*.
- **canvas**: Returns the image as [canvas](https://developer.mozilla.org/en/HTML/Canvas) element if set to *true*.
- **crossOrigin**: Sets the crossOrigin property on the img element for loading [CORS enabled images](https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image).
- **noRevoke**: By default, the [created object URL](https://developer.mozilla.org/en/DOM/window.URL.createObjectURL) is revoked after the image has been loaded, except when this option is set to *true*.

They can be used the following way:

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

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

Meta data parsing
-----------------

[](#meta-data-parsing)

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:

```
loadImage.parseMetaData(
    fileOrBlob,
    function (data) {
        if (!data.imageHead) {
            return;
        }
        // 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 = new Blob([
            data.imageHead,
            // Resized images always have a head size of 20 bytes,
            // including the JPEG marker and a minimal JFIF header:
            loadImage.blobSlice.call(resizedImage, 20)
        ], {type: resizedImage.type});
    },
    {
        maxMetaDataSize: 262144,
        disableImageHead: 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.

**Note:**
Blob objects of resized images can be created via [canvas.toBlob()](https://github.com/blueimp/JavaScript-Canvas-to-Blob).

### Exif parser

[](#exif-parser)

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 = data.exif[0x0112];
```

It also provides an **exif.get()** method to retrieve the tag value via the tag's mapped name:

```
var orientation = data.exif.get('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 = data.exif.getText('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 = data.exif.getAll();
```

The Exif parser also adds additional options for the parseMetaData method, to disable certain aspects of the parser:

- **disableExif**: Disables Exif parsing.
- **disableExifThumbnail**: Disables parsing of the Exif Thumbnail.
- **disableExifSub**: Disables parsing of the Exif Sub IFD.
- **disableExifGps**: Disables parsing of the Exif GPS Info IFD.

iOS scaling fixes
-----------------

[](#ios-scaling-fixes)

Scaling megapixel images in iOS (iPhone, iPad, iPod) can result in distorted (squashed) images.
The Load Image iOS scaling fixes extension resolves these issues.

License
-------

[](#license)

The JavaScript Load Image script is released under the [MIT license](http://www.opensource.org/licenses/MIT).

Credits
-------

[](#credits)

- Image meta data handling implementation based on the help and contribution of Achim Stöhr.
- Exif tags mapping based on Jacob Seidelin's [exif-js](https://github.com/jseidelin/exif-js).
- iOS image scaling fixes based on Shinichi Tomita's [ios-imagefile-megapixel](https://github.com/stomita/ios-imagefile-megapixel).

###  Health Score

21

—

LowBetter than 18% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity5

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 92.2% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/1ddfa322db7376aeb74409dfb0d7a1349818e2567b8f3e3010d60d5a187d4ea9?d=identicon)[Tadcka](/maintainers/Tadcka)

---

Top Contributors

[![blueimp](https://avatars.githubusercontent.com/u/244586?v=4)](https://github.com/blueimp "blueimp (83 commits)")[![tadcka](https://avatars.githubusercontent.com/u/2020827?v=4)](https://github.com/tadcka "tadcka (2 commits)")[![joewood](https://avatars.githubusercontent.com/u/1389583?v=4)](https://github.com/joewood "joewood (1 commits)")[![phoenix303](https://avatars.githubusercontent.com/u/3523278?v=4)](https://github.com/phoenix303 "phoenix303 (1 commits)")[![royhaddad](https://avatars.githubusercontent.com/u/450674?v=4)](https://github.com/royhaddad "royhaddad (1 commits)")[![naoina](https://avatars.githubusercontent.com/u/382258?v=4)](https://github.com/naoina "naoina (1 commits)")[![igorbernstein](https://avatars.githubusercontent.com/u/71188?v=4)](https://github.com/igorbernstein "igorbernstein (1 commits)")

### Embed Badge

![Health badge](/badges/silvestra-javascript-load-image/health.svg)

```
[![Health](https://phpackages.com/badges/silvestra-javascript-load-image/health.svg)](https://phpackages.com/packages/silvestra-javascript-load-image)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)