Width and height are swapped. Sample image.

Edd-C commented 4 years ago

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
    }
);

blueimp commented 4 years ago

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:

https://github.com/blueimp/JavaScript-Load-Image/blob/af40950cd629651a249a6639033fe28c6b968ac7/js/load-image-exif.js#L432-L441

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).

Edd-C commented 4 years ago

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.

Capture Capture1 Capture3

Is there another way to grab the correct Original dimensions?

Edd-C commented 4 years ago

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

blueimp commented 4 years ago

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.

Edd-C commented 4 years ago

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

Kind regards.

blueimp / JavaScript-Load-Image

Width and height are swapped. Sample image. #116

Exif

TIFF