Provide original image width+height in callback data.

Closes blueimp#90

Author: blueimp

README.md

@@ -138,19 +138,24 @@ document.getElementById('file-input').onchange = function (e) {
 
 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
+function is passed two arguments.  
+The first is either an HTML **img** element, a
 [canvas](https://developer.mozilla.org/en/HTML/Canvas) element, or an
-[Event](https://developer.mozilla.org/en/DOM/event) object of type **error**:
+[Event](https://developer.mozilla.org/en/DOM/event) object of type **error**.  
+The second is on object with the original image dimensions as properties and
+potentially additional [meta data](#meta-data-parsing):
 
 ```js
 var imageUrl = "https://example.org/image.png";
 loadImage(
     imageUrl,
-    function (img) {
+    function (img, data) {
         if(img.type === "error") {
-            console.log("Error loading image " + imageUrl);
+            console.error("Error loading image " + imageUrl);
         } else {
             document.body.appendChild(img);
+            console.log("Original image width: ", data.originalWidth);
+            console.log("Original image height: ", data.originalHeight);
         }
     },
     {maxWidth: 600}
@@ -208,7 +213,7 @@ 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 part of the 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.
@@ -244,9 +249,22 @@ element without any image size restrictions.
 
 ## Meta data parsing
 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:
+meta data automatically with the `meta` option:
+
+```js
+loadImage(
+    fileOrBlobOrUrl,
+    function (img, data) {
+        console.log("Original image head: ", data.imageHead);
+        console.log("Exif data: ", data.exif); // requires exif extension
+        console.log("IPTC data: ", data.iptc); // requires iptc extension
+    },
+    { meta: true }
+);
+```
+
+The extension also provides the method **loadImage.parseMetaData**, which can be
+used the following way:
 
 ```js
 loadImage.parseMetaData(
@@ -261,8 +279,8 @@ loadImage.parseMetaData(
             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});
+            loadImage.blobSlice.call(resizedImageBlob, 20)
+        ], {type: resizedImageBlob.type});
     },
     {
         maxMetaDataSize: 262144,
@@ -271,15 +289,16 @@ loadImage.parseMetaData(
 );
 ```
 
-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()](https://github.com/blueimp/JavaScript-Canvas-to-Blob).
 
+The Meta data extension also adds additional options used for the
+`parseMetaData` method:
+
+* **maxMetaDataSize**: Maximum number of bytes of meta data to parse.
+* **disableImageHead**: Disable parsing the original image head.
+
 ### Exif parser
 If you include the Load Image Exif Parser extension, the argument passed to the
 callback for **parseMetaData** will contain the additional property **exif** if

js/load-image.js

@@ -105,7 +105,10 @@
   loadImage.onload = function (img, event, file, callback, options) {
     revokeHelper(img, options)
     if (callback) {
-      loadImage.transform(img, options, callback, file, {})
+      loadImage.transform(img, options, callback, file, {
+        originalWidth: img.naturalWidth || img.width,
+        originalHeight: img.naturalHeight || img.height
+      })
     }
   }
 

test/test.js

@@ -126,6 +126,16 @@
         })
       ).to.be.ok
     })
+
+    it('Provide original image width+height in callback data', function (done) {
+      expect(
+        loadImage(imageUrlGIF, function (img, data) {
+          expect(data.originalWidth).to.equal(80)
+          expect(data.originalHeight).to.equal(60)
+          done()
+        })
+      ).to.be.ok
+    })
   })
 
   describe('Scaling', function () {
@@ -134,9 +144,11 @@
         expect(
           loadImage(
             blobGIF,
-            function (img) {
+            function (img, data) {
               expect(img.width).to.equal(40)
               expect(img.height).to.equal(30)
+              expect(data.originalWidth).to.equal(80)
+              expect(data.originalHeight).to.equal(60)
               done()
             },
             { maxWidth: 40 }
@@ -148,9 +160,11 @@
         expect(
           loadImage(
             blobGIF,
-            function (img) {
+            function (img, data) {
               expect(img.width).to.equal(20)
               expect(img.height).to.equal(15)
+              expect(data.originalWidth).to.equal(80)
+              expect(data.originalHeight).to.equal(60)
               done()
             },
             { maxHeight: 15 }
@@ -162,9 +176,11 @@
         expect(
           loadImage(
             blobGIF,
-            function (img) {
+            function (img, data) {
               expect(img.width).to.equal(160)
               expect(img.height).to.equal(120)
+              expect(data.originalWidth).to.equal(80)
+              expect(data.originalHeight).to.equal(60)
               done()
             },
             { minWidth: 160 }
@@ -176,9 +192,11 @@
         expect(
           loadImage(
             blobGIF,
-            function (img) {
+            function (img, data) {
               expect(img.width).to.equal(320)
               expect(img.height).to.equal(240)
+              expect(data.originalWidth).to.equal(80)
+              expect(data.originalHeight).to.equal(60)
               done()
             },
             { minHeight: 240 }