客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称：blueimp/JavaScript-Load-Image开源软件地址：https://github.com/blueimp/JavaScript-Load-Image开源编程语言：JavaScript 93.8%开源软件介绍：JavaScript Load Image
Contents
DescriptionJavaScript Load Image is a library to load images provided as 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. SetupInstall via NPM: npm install blueimp-load-imageThis will install the JavaScript files inside
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>UsageImage loadingIn your application code, use the document.getElementById('file-input').onchange = function () {
loadImage(
this.files[0],
function (img) {
document.body.appendChild(img)
},
{ maxWidth: 600 } // Options
)
}Or use the Promise based API like this (requires a polyfill for older browsers): document.getElementById('file-input').onchange = function () {
loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
document.body.appendChild(data.image)
})
}With async/await (requires a modern browser or a code transpiler like Babel or TypeScript): document.getElementById('file-input').onchange = async function () {
let data = await loadImage(this.files[0], { maxWidth: 600 })
document.body.appendChild(data.image)
}Image scalingIt is also possible to use the image scaling functionality directly with an existing image: var scaledImage = loadImage.scale(
img, // img or canvas element
{ maxWidth: 600 }
)RequirementsThe JavaScript Load Image library has zero dependencies, but benefits from the following two polyfills:
Browser supportBrowsers which implement the following APIs support all options:
This includes (but is not limited to) the following browsers:
Loading an image from a URL and applying transformations (scaling, cropping and
rotating - except Loading an image from a URL and scaling it in size is supported by all browsers which implement the img element and has been tested successfully with browser engines as old as Internet Explorer 5 (via IE11's emulation mode). The APICallbackFunction signatureThe If a File or
Blob is passed as
parameter, it returns an HTML It always returns an HTML img element when passing an image URL: var loadingImage = loadImage(
'https://example.org/image.png',
function (img) {
document.body.appendChild(img)
},
{ maxWidth: 600 }
)Cancel image loadingSome browsers (e.g. Chrome) will cancel the image loading process if the To disable callback handling, we can also unset the image event handlers and for maximum browser compatibility, cancel the file reading process if the returned object is a FileReader instance: var loadingImage = loadImage(
'https://example.org/image.png',
function (img) {
document.body.appendChild(img)
},
{ maxWidth: 600 }
)
if (loadingImage) {
// Unset event handling for the loading image:
loadingImage.onload = loadingImage.onerror = null
// Cancel image loading process:
if (loadingImage.abort) {
// FileReader instance, stop the file reading process:
loadingImage.abort()
} else {
// HTMLImageElement element, cancel the original image request by changing
// the target source to the data URL of a 1x1 pixel transparent image GIF:
loadingImage.src =
'data:image/gif;base64,' +
'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
}
}Please note: Callback argumentsFor the callback style API, the second argument to The callback function is passed two arguments:
loadImage(
fileOrBlobOrUrl,
function (img, data) {
document.body.appendChild(img)
console.log('Original image width: ', data.originalWidth)
console.log('Original image height: ', data.originalHeight)
},
{ maxWidth: 600, meta: true }
)Please note: Error handlingExample code implementing error handling: loadImage(
fileOrBlobOrUrl,
function (img, data) {
if (img.type === 'error') {
console.error('Error loading image file')
} else {
document.body.appendChild(img)
}
},
{ maxWidth: 600 }
)PromiseIf the loadImage(fileOrBlobOrUrl, { maxWidth: 600, meta: true })
.then(function (data) {
document.body.appendChild(data.image)
console.log('Original image width: ', data.originalWidth)
console.log('Original image height: ', data.originalHeight)
})
.catch(function (err) {
// Handling image loading errors
console.log(err)
})The
Please also read the note about original image dimensions normalization in the callback arguments section. If metadata has been parsed, additional properties might be present on the object. If image loading fails, the OptionsThe optional options argument to It can be used the following way with the callback style: loadImage(
fileOrBlobOrUrl,
function (img) {
document.body.appendChild(img)
},
{
maxWidth: 600,
maxHeight: 300,
minWidth: 100,
minHeight: 50,
canvas: true
}
)Or the following way with the loadImage(fileOrBlobOrUrl, {
maxWidth: 600,
maxHeight: 300,
minWidth: 100,
minHeight: 50,
canvas: true
}).then(function (data) {
document.body.appendChild(data.image)
})All settings are optional. By default, the image is returned as HTML maxWidthDefines the maximum width of the maxHeightDefines the maximum height of the minWidthDefines the minimum width of the minHeightDefines the minimum height of the sourceWidthThe width of the sub-rectangle of the source image to draw into the destination
canvas. sourceHeightThe height of the sub-rectangle of the source image to draw into the destination
canvas. topThe top margin of the sub-rectangle of the source image. rightThe right margin of the sub-rectangle of the source image. bottomThe bottom margin of the sub-rectangle of the source image. leftThe left margin of the sub-rectangle of the source image. containScales the image up/down to contain it in the max dimensions if set to coverScales the image up/down to cover the max dimensions with the image dimensions
if set to aspectRatioCrops the image to the given aspect ratio (e.g. pixelRatioDefines the ratio of the canvas pixels to the physical image pixels on the
screen. downsamplingRatioDefines the ratio in which the image is downsampled (scaled down in steps). imageSmoothingEnabledIf set to imageSmoothingQualitySets the
quality of image smoothing. |
