Skip to content

Commit ee0e0db

Browse files
blueimpblueimp
committed
Fetch blob from URL if meta data should be retrieved.
This feature requires browser support for the fetch API.
1 parent 538e23a commit ee0e0db

File tree

6 files changed

+110
-24
lines changed

6 files changed

+110
-24
lines changed

‎README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ Or alternatively, choose which components you want to include:
4343
<script src="js/load-image.js"></script>
4444
<script src="js/load-image-scale.js"></script>
4545
<script src="js/load-image-meta.js"></script>
46+
<script src="js/load-image-fetch.js"></script>
4647
<script src="js/load-image-exif.js"></script>
4748
<script src="js/load-image-exif-map.js"></script>
4849
<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.
203204
Setting the `orientation` also enables the `canvas` option.
204205
Setting `orientation` to `true` also enables the `meta` option.
205206
* **meta**: Automatically parses the image meta data if set to `true`.
206-
The meta data is passed to the callback as second argument.
207+
The meta data is passed to the callback as second argument.
208+
If the file is given as URL and the browser supports the
209+
[fetch API](https://developer.mozilla.org/en/docs/Web/API/Fetch_API), fetches
210+
the file as Blob to be able to parse the meta data.
207211
* **canvas**: Returns the image as
208212
[canvas](https://developer.mozilla.org/en/HTML/Canvas) element if set to `true`.
209213
* **crossOrigin**: Sets the crossOrigin property on the img element for loading

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ <h2>Exif meta data</h2>
5959
<script src="js/load-image.js"></script>
6060
<script src="js/load-image-scale.js"></script>
6161
<script src="js/load-image-meta.js"></script>
62+
<script src="js/load-image-fetch.js"></script>
6263
<script src="js/load-image-exif.js"></script>
6364
<script src="js/load-image-exif-map.js"></script>
6465
<script src="js/load-image-orientation.js"></script>

‎js/load-image-fetch.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/*
2+
* JavaScript Load Image Fetch
3+
* https://github.com/blueimp/JavaScript-Load-Image
4+
*
5+
* Copyright 2017, Sebastian Tschan
6+
* https://blueimp.net
7+
*
8+
* Licensed under the MIT license:
9+
* https://opensource.org/licenses/MIT
10+
*/
11+
12+
/* global define, fetch, Request */
13+
14+
;(function (factory) {
15+
'use strict'
16+
if (typeof define === 'function' && define.amd) {
17+
// Register as an anonymous AMD module:
18+
define(['./load-image', './load-image-meta'], factory)
19+
} else if (typeof module === 'object' && module.exports) {
20+
factory(require('./load-image'), require('./load-image-meta'))
21+
} else {
22+
// Browser globals:
23+
factory(window.loadImage)
24+
}
25+
}(function (loadImage) {
26+
'use strict'
27+
28+
if ('fetch' in window && 'Request' in window) {
29+
loadImage.fetchBlob = function (url, callback, options) {
30+
if (loadImage.hasMetaOption(options)) {
31+
return fetch(new Request(url, options)).then(function (response) {
32+
return response.blob()
33+
}).then(callback).catch(function (err) {
34+
console.log(err)
35+
callback()
36+
})
37+
} else {
38+
callback()
39+
}
40+
}
41+
}
42+
}))

‎js/load-image.js‎

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -26,31 +26,38 @@
2626
img.onload = function (event) {
2727
return loadImage.onload(img, event, file, callback, options)
2828
}
29-
if (loadImage.isInstanceOf('Blob', file) ||
30-
// Files are also Blob instances, but some browsers
31-
// (Firefox 3.6) support the File API but not Blobs:
32-
loadImage.isInstanceOf('File', file)) {
29+
if (typeof file === 'string') {
30+
loadImage.fetchBlob(file, function (blob) {
31+
if (blob) {
32+
file = blob
33+
url = loadImage.createObjectURL(file)
34+
} else {
35+
url = file
36+
if (options && options.crossOrigin) {
37+
img.crossOrigin = options.crossOrigin
38+
}
39+
}
40+
img.src = url
41+
}, options)
42+
return img
43+
} else if (loadImage.isInstanceOf('Blob', file) ||
44+
// Files are also Blob instances, but some browsers
45+
// (Firefox 3.6) support the File API but not Blobs:
46+
loadImage.isInstanceOf('File', file)) {
3347
url = img._objectURL = loadImage.createObjectURL(file)
34-
} else if (typeof file === 'string') {
35-
url = file
36-
if (options && options.crossOrigin) {
37-
img.crossOrigin = options.crossOrigin
48+
if (url) {
49+
img.src = url
50+
return img
3851
}
39-
} else {
40-
return false
41-
}
42-
if (url) {
43-
img.src = url
44-
return img
52+
return loadImage.readFile(file, function (e) {
53+
var target = e.target
54+
if (target && target.result) {
55+
img.src = target.result
56+
} else if (callback) {
57+
callback(e)
58+
}
59+
})
4560
}
46-
return loadImage.readFile(file, function (e) {
47-
var target = e.target
48-
if (target && target.result) {
49-
img.src = target.result
50-
} else if (callback) {
51-
callback(e)
52-
}
53-
})
5461
}
5562
// The check for URL.revokeObjectURL fixes an issue with Opera 12,
5663
// which provides URL.createObjectURL but doesn't properly implement it:
@@ -65,6 +72,13 @@
6572
}
6673
}
6774

75+
// If the callback given to this function returns a blob, it is used as image
76+
// source instead of the original url and overrides the file argument used in
77+
// the onload and onerror event callbacks:
78+
loadImage.fetchBlob = function (url, callback, options) {
79+
callback()
80+
}
81+
6882
loadImage.isInstanceOf = function (type, obj) {
6983
// Cross-frame instanceof check
7084
return Object.prototype.toString.call(obj) === '[object ' + type + ']'

‎test/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
<script src="../js/load-image.js"></script>
3434
<script src="../js/load-image-scale.js"></script>
3535
<script src="../js/load-image-meta.js"></script>
36+
<script src="../js/load-image-fetch.js"></script>
3637
<script src="../js/load-image-exif.js"></script>
3738
<script src="../js/load-image-exif-map.js"></script>
3839
<script src="../js/load-image-orientation.js"></script>

‎test/test.js‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -479,7 +479,7 @@
479479
describe('Canvas', function () {
480480
it('Return img element to callback if canvas is not true', function (done) {
481481
expect(loadImage(blobGIF, function (img) {
482-
expect(img.getContext).to.not.be.ok
482+
expect(img.getContext).to.be.falsy
483483
expect(img.nodeName.toLowerCase()).to.equal('img')
484484
done()
485485
})).to.be.ok
@@ -550,6 +550,30 @@
550550
}, {meta: true})).to.be.ok
551551
})
552552
})
553+
554+
if ('fetch' in window && 'Request' in window) {
555+
describe('Fetch', function () {
556+
it('Should fetch blob from URL if meta is true', function (done) {
557+
expect(loadImage(imageUrlJPEG, function (img, data) {
558+
expect(data).to.be.ok
559+
expect(data.imageHead).to.be.ok
560+
expect(data.exif).to.be.ok
561+
expect(data.exif.get('Orientation')).to.equal(6)
562+
done()
563+
}, {meta: true})).to.be.ok
564+
})
565+
566+
it('Should not fetch blob from URL if meta is false', function (done) {
567+
expect(loadImage(imageUrlJPEG, function (img, data) {
568+
expect(data.imageHead).to.be.falsy
569+
expect(data.exif).to.be.falsy
570+
expect(img.width).to.equal(2)
571+
expect(img.height).to.equal(1)
572+
done()
573+
})).to.be.ok
574+
})
575+
})
576+
}
553577
}(
554578
this.chai.expect,
555579
this.loadImage

0 commit comments

Comments
 (0)