PHPackages itlized/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. [Image & Media](/categories/media) 4. / 5. itlized/javascript-load-image ActiveLibrary[Image & Media](/categories/media) itlized/javascript-load-image ============================= JavaScript Load Image is a library to load images provided as File or Blob objects or via URL. 01.2kJavaScript Since Sep 27Pushed 12y ago1 watchersCompare [ Source](https://github.com/ITLized/JavaScript-Load-Image)[ Packagist](https://packagist.org/packages/itlized/javascript-load-image)[ RSS](/packages/itlized-javascript-load-image/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependenciesVersions (1)Used By (0) JavaScript Load Image ===================== [](#javascript-load-image) Demo ---- [](#demo) [JavaScript Load Image Demo](http://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. 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 (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. "") 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 = "http://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). - **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 24 — LowBetter than 32% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity17 Limited adoption so far Community13 Small or concentrated contributor base Maturity41 Maturing project, gaining track record Bus Factor1 Top contributor holds 93.3% 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/40b93f5ed56affca31d375b6278b86d5ab50a43951fcf608203058f405c4a829?d=identicon)[itlized](/maintainers/itlized) --- Top Contributors [![blueimp](https://avatars.githubusercontent.com/u/244586?v=4)](https://github.com/blueimp "blueimp (70 commits)")[![igorbernstein](https://avatars.githubusercontent.com/u/71188?v=4)](https://github.com/igorbernstein "igorbernstein (1 commits)")[![joewood](https://avatars.githubusercontent.com/u/1389583?v=4)](https://github.com/joewood "joewood (1 commits)")[![naoina](https://avatars.githubusercontent.com/u/382258?v=4)](https://github.com/naoina "naoina (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)") ### Embed Badge ![Health badge](/badges/itlized-javascript-load-image/health.svg) ``` [![Health](https://phpackages.com/badges/itlized-javascript-load-image/health.svg)](https://phpackages.com/packages/itlized-javascript-load-image) ``` ### Alternatives [milon/barcode Barcode generator like Qr Code, PDF417, C39, C39+, C39E, C39E+, C93, S25, S25+, I25, I25+, C128, C128A, C128B, C128C, 2-Digits UPC-Based Extention, 5-Digits UPC-Based Extention, EAN 8, EAN 13, UPC-A, UPC-E, MSI (Variation of Plessey code) 1.5k13.3M39](/packages/milon-barcode)[bkwld/croppa Image thumbnail creation through specially formatted URLs for Laravel 510496.0k23](/packages/bkwld-croppa)[goat1000/svggraph Generates SVG graphs 132849.6k3](/packages/goat1000-svggraph)[cohensive/embed Media Embed (for Laravel or as a standalone). 120370.4k](/packages/cohensive-embed)[netresearch/rte-ckeditor-image Image support in CKEditor for the TYPO3 ecosystem - by Netresearch 63991.3k4](/packages/netresearch-rte-ckeditor-image)[humanmade/tachyon-plugin Rewrites WordPress image URLs to use Tachyon 87338.5k2](/packages/humanmade-tachyon-plugin) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)