Width and height are swapped. Sample image.

Hello,

When I upload an image taken on an iPhone XS at a fairly high res, the exif data show the heigth and width swapped.

Here is the sample image I'm using:

Details:

When I use your demo tool here to upload that image, I get this (notice the swapped x and y vals):

Settings:

Exif

TIFF

Is there a setting I'm missing? Or is this a bug?

var loadingImage = loadImage(
	e.target.files[0],
	function(img, meta) {
		var x = img.toDataURL('image/jpeg');
		var y = dataURLToBlob(x);
		document.getElementById('preview').src = x;

		// Trigger custom event.
		$.event.trigger({
			type: 'imageResized',
			blob: y,
			url: x,
                        exif: meta
		});
	},
	{
		meta: true,
		canvas: true,
		orientation: true,
		contain: true,
		maxWidth: 1000,
		maxHeight: 1000
	}
);

The Exif data contains the original pixel dimensions.
So if you rotate the image on client-side (e.g. with orientation: true), the pixel data might be swapped, but the Exif dimensions will retain their original values.

So far this library only supports to override the Exif orientation value:
https://github.com/blueimp/JavaScript-Load-Image#exif-writer

Technically, the writeExifData method could write Exif data at all Exif offset positions, but it's only easy to do so with values that have the same byte length, since otherwise you would have to change the Exif tag length and possibly update all following Exif offset positions.

That's why only the Orientation writer has been implemented so far, but it is set up to be extended:

JavaScript-Load-Image/js/load-image-exif.js

Lines 432 to 441 in af40950

    
           loadImage.exifWriters = { 
        
             // Orientation writer: 
        
             0x0112: function (buffer, data, value) { 
        
               var orientationOffset = data.exifOffsets[0x0112] 
        
               if (!orientationOffset) return buffer 
        
               var view = new DataView(buffer, orientationOffset + 8, 2) 
        
               view.setUint16(0, value, data.exifLittleEndian) 
        
               return buffer 
        
             } 
        
           }

PS:
Instead of doing canvas.toDataURL and dataURLToBlob, it will be more efficient to use canvas.toBlob() to create the Blob and URL.createObjectURL(blob) to create the URL (if you need the URL only client-side).

So if you rotate the image on client-side (e.g. with orientation: true), the pixel data might be swapped, but the Exif dimensions will retain their original values.

Are you suggesting that the meta function(img, meta) { should contain the original photo dimensions?

When logged, they are swapped.

Is there another way to grab the correct Original dimensions?

Also, this is only happening with some (not all) images for us. I have yet to identify the cause.

The Exif Pixel dimensions represent the original pixel data as taken by the camera, which are not necessarily the same dimensions as the image in its correct orientation.

For example, the following is the letter F with the Exif orientation value 6:

██
██  ██
██████████

Correctly oriented, the width and height dimensions will be swapped:

██████
██
████
██
██

That means the Exif Pixel dimensions for a picture with Exif orientation values 5, 6, 7 and 8 will always be swapped compared to the correctly orientated image.

This has nothing to do with this library and you can test this yourself by analyzing the Exif data of any picture taken with an Exif orientation value in this range.

Thank you for your patience. I see the correlation between orientation and the width/height now. I was able to solve it.

Kind regards.

	loadImage.exifWriters = {
	// Orientation writer:
	0x0112: function (buffer, data, value) {
	var orientationOffset = data.exifOffsets[0x0112]
	if (!orientationOffset) return buffer
	var view = new DataView(buffer, orientationOffset + 8, 2)
	view.setUint16(0, value, data.exifLittleEndian)
	return buffer
	}
	}