0

How is it possible to correct image orientation on this answer Use HTML5 to resize an image before upload

I use this function to resize images on client before uploading to server. If I upload image from mobile phone image is saved in wrong orientation. I want to correct orientation client side before upload?

Aldee
  • 61
  • 9
  • *If I upload image from mobile phone image is saved in wrong orientation.* Why not just change the orientation of the picture on your phone and re-upload it? – Scott Marcus Jul 06 '20 at 17:28
  • I found these functions https://stackoverflow.com/a/40867559/10815299 (to change orientation) and https://stackoverflow.com/a/32490603/10815299 (to get orientation of uploaded image) who seems to solve my problem, but how to combine? – Aldee Jul 06 '20 at 17:31

1 Answers1

0

I tried it as followed but does not work ...

window.uploadPhotos = function(url){
// Read in file
var file = event.target.files[0];

// Ensure it's an image
if(file.type.match(/image.*/)) {
    console.log('An image has been loaded');

    // Load the image
    var reader = new FileReader();
    reader.onload = function (readerEvent) {
        var image = new Image();
        image.onload = function (imageEvent) {

            // Resize the image
            var canvas = document.createElement('canvas'),
                max_size = 1500,// TODO : pull max size from a site config
                width = image.width,
                height = image.height;
            if (width > height) {
                if (width > max_size) {
                    height *= max_size / width;
                    width = max_size;
                }
            } else {
                if (height > max_size) {
                    width *= max_size / height;
                    height = max_size;
                }
            }
            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext('2d');
            
            
            getOrientation(file, function(orientation) {
                alert(orientation);             
                // set proper canvas dimensions before transform & export
                if (4 < orientation && orientation < 9) {
                  canvas.width = height;
                  canvas.height = width;
                } else {
                  canvas.width = width;
                  canvas.height = height;
                }

                // transform context before drawing image
                switch (orientation) {
                  case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
                  case 3: ctx.transform(-1, 0, 0, -1, width, height); break;
                  case 4: ctx.transform(1, 0, 0, -1, 0, height); break;
                  case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
                  case 6: ctx.transform(0, 1, -1, 0, height, 0); break;
                  case 7: ctx.transform(0, -1, -1, 0, height, width); break;
                  case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
                  default: break;
                }   
            });
                
            ctx.drawImage(image, 0, 0, width, height);              
                        
            var dataUrl = canvas.toDataURL('image/jpeg');
            var resizedImage = dataURLToBlob(dataUrl);
            $.event.trigger({
                type: "imageResized",
                blob: resizedImage,
                url: dataUrl
            });
        }
        image.src = readerEvent.target.result;
    }
    reader.readAsDataURL(file);
}

};

Aldee
  • 61
  • 9