# blueimp/javascript-load-image

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/blueimp-javascript-load-image).**

4,463 stars · 922 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/blueimp/JavaScript-Load-Image
- Homepage: https://blueimp.github.io/JavaScript-Load-Image/
- awesome-repositories: https://awesome-repositories.com/repository/blueimp-javascript-load-image.md

## Description

This is a JavaScript image loading library and a suite of utilities for binary metadata parsing and canvas-based transformations. It provides a unified interface for loading images from URLs, Blobs, or Files into HTML elements.

The library includes a canvas-based image transformer for producing scaled, cropped, or rotated images and an image orientation handler that rotates or flips images based on embedded metadata. It also features an Exif metadata parser to extract IPTC and Exif tags and embedded thumbnails from binary image data.

The toolset covers browser-based image processing, including client-side resizing and automatic orientation correction to ensure consistent display across different screens. It supports the extraction and modification of image binary headers and the restoration of metadata after resizing.

## Tags

### Graphics & Multimedia

- [Browser-Based Image Processing](https://awesome-repositories.com/f/graphics-multimedia/browser-based-image-processing.md) — Performs image scaling, cropping, and rotation directly within the web browser environment.
- [Canvas-Based Image Processors](https://awesome-repositories.com/f/graphics-multimedia/canvas-based-image-processors.md) — Uses an off-screen HTML canvas to perform scaling, cropping, and rotation of image data.
- [Orientation Corrections](https://awesome-repositories.com/f/graphics-multimedia/exif-metadata-handling/orientation-corrections.md) — Reads Exif orientation tags to automatically rotate or flip the canvas for correct image display.
- [Unified Source Loading](https://awesome-repositories.com/f/graphics-multimedia/image-file-loading/unified-source-loading.md) — Provides a unified interface to load images from URLs, Blobs, or File objects into HTML elements.
- [Image Metadata Extraction](https://awesome-repositories.com/f/graphics-multimedia/image-metadata-extraction.md) — Parses embedded Exif and IPTC tags from image files to retrieve technical data and thumbnails. ([source](https://blueimp.github.io/JavaScript-Load-Image/))
- [Image Scaling](https://awesome-repositories.com/f/graphics-multimedia/image-output-configurations/image-scaling.md) — Resizes images to specific maximum dimensions while maintaining the original aspect ratio. ([source](https://cdn.jsdelivr.net/gh/blueimp/javascript-load-image@master/README.md))
- [EXIF Metadata Handling](https://awesome-repositories.com/f/graphics-multimedia/exif-metadata-handling.md) — Overrides orientation values within image binaries to control how the image is displayed. ([source](https://cdn.jsdelivr.net/gh/blueimp/javascript-load-image@master/README.md))

### Networking & Communication

- [Image Transformations](https://awesome-repositories.com/f/networking-communication/url-parameter-parsers/automatic-parameter-mapping/on-the-fly-transformation-mapping/image-transformations.md) — Transforms images from various sources by scaling, cropping, or rotating them. ([source](https://blueimp.github.io/JavaScript-Load-Image/))

### Operating Systems & Systems Programming

- [Image Metadata Parsers](https://awesome-repositories.com/f/operating-systems-systems-programming/system-administration-maintenance/file-system-management/file-system-utilities/file-metadata-inspection/metadata-preservation-engines/metadata-extraction/image-metadata-parsers.md) — Extracts IPTC and Exif tags and embedded thumbnails from image binary data.
- [Image Metadata Preservations](https://awesome-repositories.com/f/operating-systems-systems-programming/assembly-metadata-editors/metadata-preservation/image-metadata-preservations.md) — Preserves original binary headers and EXIF metadata during the image resizing process. ([source](https://cdn.jsdelivr.net/gh/blueimp/javascript-load-image@master/README.md))

### Web Development

- [Image Resizing](https://awesome-repositories.com/f/web-development/client-side-media-processing/client-side-image-matting/image-resizing.md) — Scales images to specific dimensions on the client side while preserving binary header integrity.
- [Image Loading Libraries](https://awesome-repositories.com/f/web-development/image-loading-libraries.md) — Loads images from URLs, Blobs, or Files into HTML elements with integrated scaling and cropping.
- [Binary Header Modification](https://awesome-repositories.com/f/web-development/client-side-media-processing/client-side-image-matting/binary-header-modification.md) — Overwrites orientation values and restores complete image headers after resizing to maintain file integrity. ([source](https://blueimp.github.io/JavaScript-Load-Image/))

### Development Tools & Productivity

- [Binary Metadata Editing](https://awesome-repositories.com/f/development-tools-productivity/direct-file-manipulations/binary-metadata-editing.md) — Provides capabilities to directly edit raw image bytes to modify binary metadata and orientation tags.
- [Binary Header Editors](https://awesome-repositories.com/f/development-tools-productivity/integration-metadata-retrievers/media-metadata-retrievers/media-metadata-extraction/binary-header-editors.md) — Writes binary headers directly to the image file to maintain metadata integrity without transcoding the payload.