How to break image metadata in browser before downloading (javascript)

Question

I upload images to node js server and submit them to AWS S3 for use on my site. Images that were taken on iOS devices sometimes appear laterally in the browser, and I already realized that this is due to some metadata that iOS attaches to each image, which includes the orientation of the phone during image capture. It seems that all the images that were taken in portrait orientation are flipped sideways in some browsers (including Chrome on OSX).

I can break the metadata in node and upload to amazon, however the images are still sideways when they reach the node server.

It seems that the most effective solution would be to split the metadata when the client selects the image files and loads them with the correct orientation, however, I understand that you can also detect the metadata orientation and flip the image accordingly from the node server.

The problem with the transfer to the server: 1. Too expensive performance. 2. The client still sees the side image in the browser preview before downloading.

TL DR:

So, I'm just wondering, can someone point me in the right direction, how to remove the metadata from the image in the browser while the image is displayed to the user?

Thanks <3

Answer 1

. . , exif.js, , . - :

var exif = EXIF.findEXIFinJPEG(binary);

switch(exif.Orientation){
    case 1: //no change needed
        break;
    case 2: //horizontal flip
        context.translate(imageWidth, 0);
        context.scale(-1, 1);
        break;

    ...

    case 8: //rotate 90 deg left
        context.rotate(-0.5 * Math.PI);
        context.translate(-imageWidth, 0);
        break;
}

context.drawImage(image, 0, 0, imageWidth, imageHeight);

, , .