| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
| Name | Name | Last commit date | ||
|---|---|---|---|---|
A JavaScript library to load and transform image files.
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 methods to parse image meta data to extract IPTC and Exif tags as well as embedded thumbnail images and to restore the complete image header after resizing.
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:
<script src="js/load-image.js"></script>
<script src="js/load-image-scale.js"></script>
<script src="js/load-image-meta.js"></script>
<script src="js/load-image-fetch.js"></script>
<script src="js/load-image-orientation.js"></script>
<script src="js/load-image-exif.js"></script>
<script src="js/load-image-exif-map.js"></script>
<script src="js/load-image-iptc.js"></script>
<script src="js/load-image-iptc-map.js"></script>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
);
};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}
);The JavaScript Load Image library has zero dependencies.
However, JavaScript Load Image is a very suitable complement to the Canvas to Blob library.
The loadImage() function accepts a File or Blob object or a simple image URL (e.g. 'https://example.org/image.png') as first argument.
If a File or
Blob is passed as parameter, it
returns a HTML img element if the browser supports the
URL API or a
FileReader object if
supported, or false.
It always returns a HTML
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 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 element, or an 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}
);The optional third argument to loadImage() is a map of options:
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.
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 and IPTC parsers.
Note:
Blob objects of resized images can be created via
canvas.toBlob().
If you include the Load Image Exif Parser extension, the argument passed to the
callback for parseMetaData will contain 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/text as keys/values:
var allTags = data.exif.getAll();The Exif parser also adds additional options for the parseMetaData method, to disable certain aspects of the parser:
If you include the Load Image IPTC Parser extension, the argument passed to the
callback for parseMetaData will contain the additional property iptc if
IPTC data could be found in the given image.
The iptc object stores the parsed IPTC tags:
var objectname = data.iptc[0x5];It also provides an iptc.get() method to retrieve the tag value via the tag's mapped name:
var objectname = data.iptc.get('ObjectName');By default, the only available mapped names are ObjectName.
If you also include the Load Image IPTC Map library, additional tag mappings
become available, as well as two additional methods, iptc.getText() and
iptc.getAll():
var keywords = data.iptc.getText('Keywords'); // e.g.: ['Weather','Sky']
// A map of all parsed tags with their mapped names/text as keys/values:
var allTags = data.iptc.getAll();The IPTC parser also adds additional options for the parseMetaData method, to disable certain aspects of the parser:
The JavaScript Load Image script is released under the MIT license.
| Back | FazBrowse Home | New Git URL |