JavaScript Load Image

A JavaScript library to load and transform image files.

• Demo
• Description
• Setup
• Usage
  • Image loading
  • Image scaling
• Requirements
• Browser support
• API
  • Callback
    • Function signature
    • Cancel image loading
    • Callback arguments
    • Error handling
  • Promise
• Options
  • maxWidth
  • maxHeight
  • minWidth
  • minHeight
  • sourceWidth
  • sourceHeight
  • top
  • right
  • bottom
  • left
  • contain
  • cover
  • aspectRatio
  • pixelRatio
  • downsamplingRatio
  • imageSmoothingEnabled
  • imageSmoothingQuality
  • crop
  • orientation
  • meta
  • canvas
  • crossOrigin
  • noRevoke
• Metadata parsing
  • Image head
  • Exif parser
    • Exif Thumbnail
    • Exif IFD
    • GPSInfo IFD
    • Interoperability IFD
    • Exif parser options
  • Exif writer
  • IPTC parser
    • IPTC parser options
• License
• Credits

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

It also provides methods to parse image metadata to extract IPTC and Exif tags as well as embedded thumbnail images, to overwrite the Exif Orientation value and to restore the complete image header after resizing.

Install via NPM:

npm install blueimp-load-image

This will install the JavaScript files inside ./node_modules/blueimp-load-image/js/ relative to your current directory, from where you can copy them into a folder that is served 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"