Fetch blob from URL if meta data should be retrieved.

This feature requires browser support for the fetch API.

Author: blueimp

README.md

@@ -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

index.html

@@ -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>

js/load-image-fetch.js

@@ -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()
+      }
+    }
+  }
+}))

js/load-image.js

@@ -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 + ']'

test/index.html

@@ -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>

test/test.js

@@ -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