JavaScript Load Image – Load and Transform

A JavaScript library for loading and transforming image files can greatly enhance the user experience of your website. By using a library specifically designed for this purpose, you can easily manipulate and display images in a variety of ways. This not only makes your website look more attractive and professional, but it can also improve the performance and speed of your site.

The JavaScript Load Image

The JavaScript Load Image library allows you to load images in a variety of ways, including via File or Blob objects, or by URL. This library offers the ability to scale, crop, and rotate images, and returns the result as either an HTML img or canvas element.

In addition to its image loading capabilities, this library also provides methods for parsing image metadata, such as IPTC and Exif tags, as well as embedded thumbnail images. It also offers the ability to modify the Exif Orientation value, and to restore the complete image header after resizing.

Installation

Install via npm

npm install blueimp-load-image

This installation will place the JavaScript files within the ./node_modules/blueimp-load-image/js/ directory, relative to your current location. Once the installation is complete, you can then transfer these files to a folder that is accessible by your web server.

Next include the combined and minified JavaScript Load Image script in your HTML markup:

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

Or alternatively, choose which components you want to include:

<!-- required for all operations -->
<script src="js/load-image.js"></script>

<!-- required for scaling, cropping and as dependency for rotation -->
<script src="js/load-image-scale.js"></script>

<!-- required to parse meta data and to restore the complete image head -->
<script src="js/load-image-meta.js"></script>

<!-- required to parse meta data from images loaded via URL -->
<script src="js/load-image-fetch.js"></script>

<!-- required for rotation and cross-browser image orientation -->
<script src="js/load-image-orientation.js"></script>

<!-- required to parse Exif tags and cross-browser image orientation -->
<script src="js/load-image-exif.js"></script>

<!-- required to display text mappings for Exif tags -->
<script src="js/load-image-exif-map.js"></script>

<!-- required to parse IPTC tags -->
<script src="js/load-image-iptc.js"></script>

<!-- required to display text mappings for IPTC tags -->
<script src="js/load-image-iptc-map.js"></script>

Image loading

In your application code, use the loadImage() function with callback style:

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

Image scaling

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

Demo Download