Permalink
Browse files

Fetch blob from URL if meta data should be retrieved.

This feature requires browser support for the fetch API.
  • Loading branch information...
blueimp committed Feb 23, 2017
1 parent 538e23a commit ee0e0db9c3638f7898519bdfd45650beec2d16d8
Showing with 110 additions and 24 deletions.
  1. +5 −1 README.md
  2. +1 −0 index.html
  3. +42 −0 js/load-image-fetch.js
  4. +36 −22 js/load-image.js
  5. +1 −0 test/index.html
  6. +25 −1 test/test.js
View
@@ -43,6 +43,7 @@ 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-exif.js"></script>
<script src="js/load-image-exif-map.js"></script>
<script src="js/load-image-orientation.js"></script>
@@ -203,7 +204,10 @@ the image, which will be parsed automatically if the exif library is available.
Setting the `orientation` also enables the `canvas` option.
Setting `orientation` to `true` also enables the `meta` option.
* **meta**: Automatically parses the image meta data if set to `true`.
The meta data is passed to the callback as second argument.
The meta data is passed to the callback as second argument.
If the file is given as URL and the browser supports the
[fetch API](https://developer.mozilla.org/en/docs/Web/API/Fetch_API), fetches
the file as Blob to be able to parse the meta data.
* **canvas**: Returns the image as
[canvas](https://developer.mozilla.org/en/HTML/Canvas) element if set to `true`.
* **crossOrigin**: Sets the crossOrigin property on the img element for loading
View
@@ -59,6 +59,7 @@ <h2>Exif meta data</h2>
<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-exif.js"></script>
<script src="js/load-image-exif-map.js"></script>
<script src="js/load-image-orientation.js"></script>
View
@@ -0,0 +1,42 @@
/*
* JavaScript Load Image Fetch
* https://github.com/blueimp/JavaScript-Load-Image
*
* Copyright 2017, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* https://opensource.org/licenses/MIT
*/
/* global define, fetch, Request */
;(function (factory) {
'use strict'
if (typeof define === 'function' && define.amd) {
// Register as an anonymous AMD module:
define(['./load-image', './load-image-meta'], factory)
} else if (typeof module === 'object' && module.exports) {
factory(require('./load-image'), require('./load-image-meta'))
} else {
// Browser globals:
factory(window.loadImage)
}
}(function (loadImage) {
'use strict'
if ('fetch' in window && 'Request' in window) {
loadImage.fetchBlob = function (url, callback, options) {
if (loadImage.hasMetaOption(options)) {
return fetch(new Request(url, options)).then(function (response) {
return response.blob()
}).then(callback).catch(function (err) {
console.log(err)
callback()
})
} else {
callback()
}
}
}
}))
View
@@ -26,31 +26,38 @@
img.onload = function (event) {
return loadImage.onload(img, event, file, callback, options)
}
if (loadImage.isInstanceOf('Blob', file) ||
// Files are also Blob instances, but some browsers
// (Firefox 3.6) support the File API but not Blobs:
loadImage.isInstanceOf('File', file)) {
if (typeof file === 'string') {
loadImage.fetchBlob(file, function (blob) {
if (blob) {
file = blob
url = loadImage.createObjectURL(file)
} else {
url = file
if (options && options.crossOrigin) {
img.crossOrigin = options.crossOrigin
}
}
img.src = url
}, options)
return img
} else if (loadImage.isInstanceOf('Blob', file) ||
// Files are also Blob instances, but some browsers
// (Firefox 3.6) support the File API but not Blobs:
loadImage.isInstanceOf('File', file)) {
url = img._objectURL = loadImage.createObjectURL(file)
} else if (typeof file === 'string') {
url = file
if (options && options.crossOrigin) {
img.crossOrigin = options.crossOrigin
if (url) {
img.src = url
return img
}
} else {
return false
}
if (url) {
img.src = url
return img
return loadImage.readFile(file, function (e) {
var target = e.target
if (target && target.result) {
img.src = target.result
} else if (callback) {
callback(e)
}
})
}
return loadImage.readFile(file, function (e) {
var target = e.target
if (target && target.result) {
img.src = target.result
} else if (callback) {
callback(e)
}
})
}
// The check for URL.revokeObjectURL fixes an issue with Opera 12,
// which provides URL.createObjectURL but doesn't properly implement it:
@@ -65,6 +72,13 @@
}
}
// If the callback given to this function returns a blob, it is used as image
// source instead of the original url and overrides the file argument used in
// the onload and onerror event callbacks:
loadImage.fetchBlob = function (url, callback, options) {
callback()
}
loadImage.isInstanceOf = function (type, obj) {
// Cross-frame instanceof check
return Object.prototype.toString.call(obj) === '[object ' + type + ']'
View
@@ -33,6 +33,7 @@
<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-exif.js"></script>
<script src="../js/load-image-exif-map.js"></script>
<script src="../js/load-image-orientation.js"></script>
View
@@ -479,7 +479,7 @@
describe('Canvas', function () {
it('Return img element to callback if canvas is not true', function (done) {
expect(loadImage(blobGIF, function (img) {
expect(img.getContext).to.not.be.ok
expect(img.getContext).to.be.falsy
expect(img.nodeName.toLowerCase()).to.equal('img')
done()
})).to.be.ok
@@ -550,6 +550,30 @@
}, {meta: true})).to.be.ok
})
})
if ('fetch' in window && 'Request' in window) {
describe('Fetch', function () {
it('Should fetch blob from URL if meta is true', function (done) {
expect(loadImage(imageUrlJPEG, function (img, data) {
expect(data).to.be.ok
expect(data.imageHead).to.be.ok
expect(data.exif).to.be.ok
expect(data.exif.get('Orientation')).to.equal(6)
done()
}, {meta: true})).to.be.ok
})
it('Should not fetch blob from URL if meta is false', function (done) {
expect(loadImage(imageUrlJPEG, function (img, data) {
expect(data.imageHead).to.be.falsy
expect(data.exif).to.be.falsy
expect(img.width).to.equal(2)
expect(img.height).to.equal(1)
done()
})).to.be.ok
})
})
}
}(
this.chai.expect,
this.loadImage

0 comments on commit ee0e0db

Please sign in to comment.