Fix method to ignore EXIF image orientation in annotation tool

mzur commented 2 months ago

The old implementation no longer worked in all cases in Firefox. This change fixes that and also implements a better caching mechanism for faster switching between images, while slightly reducing the memory consumption. The memory consumption could have been greatly reduced, too, but I decided to favor the faster switching.

mzur commented 2 months ago

@lehecht This was a tough one. Can you please test your images with this branch? I think the issue should be fixed and switching between images should be faster now, too.

mzur commented 2 months ago

Just for the record, this is the HTML that I used to test the image-orientation handling:

<!DOCTYPE html>
<body>
    <canvas id="canvas2" width="300" height="300"></canvas>

    <button onclick="load()">Load</button>

    <script type="text/javascript">
        const canvas = document.createElement('canvas');
        const canvas2 = document.getElementById('canvas2');
        canvas.width = 300;
        canvas.height = 300;

        const urls = [
            '20150813_224051_IMG_3331.JPG',
            'pexels-alfo-medeiros-16806729.jpg',
        ];
        let index = 0;

        const images = urls.map(function (url) {
            let image = document.createElement('img');
            image.width = 300;
            image.height = 300;
            image.style.imageOrientation = 'none';
            image.style.visibility = 'hidden';
            image.style.position = 'fixed';
            image.src = url;

            return image;
        });

        function load() {
            image = images[++index % urls.length];

            document.body.appendChild(image);
            canvas.getContext('2d').drawImage(image, 0, 0, image.width, image.height);
            document.body.removeChild(image);

            canvas2.getContext('2d').drawImage(canvas, 0, 0, canvas.width, canvas.height);
        }
    </script>
</body>

The first URL is a non-rotated image and the second and image that would be rotated based on EXIF data.

lehecht commented 2 months ago

@mzur I tested your code, but unfortunately my other rotated images still remain rotated. Reloading the page does not help either. Moreover the thumbnails are rotated, too.

I rotated the images before creating a new image volume.

lehecht commented 2 months ago

Just for the record, this is the HTML that I used to test the image-orientation handling:

Where did you saved the images? Mine couldn't be found in storage/images or when using the absolute path.

mzur commented 2 months ago

I tested your code, but unfortunately my other rotated images still remain rotated.

Can you please send me all the images again (in the exact state that you use them)? Did you also rebuild the JS when you checked out this branch?

Moreover the thumbnails are rotated, too.

I recently pushed https://github.com/biigle/core/pull/804 which may only work with a newer Vips version. Maybe you have to rebuild the worker image again?

Where did you saved the images?

You can put the file in any directory. It expects the images in the same directory. However, it only works if you run it via a webserver. In the console, navigate to the directory with the HTML and then run php -S localhost:8001. This starts the PHP dev webserver and you can visit http://localhost:8001 to see the HTML.

lehecht commented 2 months ago

Everything works I was just confused about the rotation results of different image viewer/image editing programs.

mzur commented 2 months ago

Thanks!

biigle / core

Fix method to ignore EXIF image orientation in annotation tool #809