Languages

Problem with picture rotation uploaded to server via mobile browser - Samsung Galaxy S7

2 points
Asked by:
Kate_C
19580

I have a problem with picture rotation uploaded to server via mobile browser.

On my Samsung Galaxy S7 and Samsung Galaxy A10 all pictures taken vertically have wrong width and height - 4032 x 3024 but orientation is 90 degrees, so I guess that's why android is able to display this it correctly.

On the other hand all screenshots have size 1080 x 1920.

The standard way is the first size is width and second size is height.
Eg:

width x height
 4032 x 3024 - vertical picture with orientation 90 degrees (picture details)
 4032 x 3024 - horizontal picture with orientation 0 degrees (picture details)
 1080 x 1920 - screenshot - lack of orientation in details of picture

Is is android bug? And how to fix it?
How to display the picture uploaded with correct rotation?

I made second test, I sent picture over mail to xiaomi smartphone, I uploaded this picture taken with Samsung S7 and the problem is the same, uploaded picture have wrong rotation.

Images:

Picture 1 - 4032 x 3024 - vertical picture with orientation 90 degrees (picture details):

Picture 2 - 4032 x 3024 - horizontal picture with orientation 0 degrees (picture details)

Picture 3 - Normal screenshot - it is uploaded in correct way with correct orientation (vertical):

 

1 answer
1 points
Answered by:
Kate_C
19580

If it is not yours webpage report bug to admin.

As I suppose, you use #programming, #java, #img, etc. tags - probably you are programmer and it is yours web page.

The problem looks like the picture is not rotated in proper way before save operation on the server.

You have two options: rotate it in browser or on server.

HMTL img element has built-in rotation support before displaying. So you can use it to repaint on canvas and extract corrected image data to send it.

If you need more informations about the solution read this article.

Simple solution:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <input id="picture" type="file" />
  <button id="sender">Send corrected picture</button>
  <script>

    function loadImage(file, callback) {
    	var image = document.createElement('img');
        image.onload = function() {
			URL.revokeObjectURL(image.src);
          	callback(image);
        };
        image.onerror = function() {
			URL.revokeObjectURL(image.src);
          	console.log('Incorrect image format.');
        };
      	image.src = URL.createObjectURL(file);
    }
    
    function correctImage(file, callback) {
    	loadImage(file, function(image) {
          	var canvas = document.createElement('canvas');
          	var context = canvas.getContext('2d');
			canvas.width = image.width;
          	canvas.height = image.height;
        	context.drawImage(image, 0, 0, image.width, image.height);
            try {
                var correctedData = canvas.toDataURL('image/jpeg', 1.0);
              	callback(correctedData);
            } catch (e) {
                console.log('Save image error.');
            }
        });
    }
    
    var picture = document.querySelector("#picture");
    var sender = document.querySelector("#sender");
    
    // picture saved as data url with base64 encoding 
    var correctedData = null;

    picture.addEventListener('change', function() {
        if (this.files && this.files.length > 0) {
            var file = this.files[0];
            if (file.type == 'image/jpeg' // only in this case rotation is needed
                  || file.type == 'image/bmp' 
                  || file.type == 'image/gif' 
                  || file.type == 'image/png' 
                  || file.type == 'image/tiff') {
              	correctImage(file, function(data) {
                  	correctedData = data;
                });
            } else {
                console.log('Incorrect image format.');
            }
        }
    });
    
    sender.addEventListener('click', function() {
      	if (correctedData) {
        	//TODO: correctedData sending
      	    console.log(correctedData.substring(0, 50) + '...');
        }
    });

  </script>
</body>
</html>

 

0 comments Add comment
Native Advertising
50 000 ad impressions - 449$
🚀
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join