Languages
[Edit]
EN

JavaScript - rotate jpeg image / picture to correct orientation before sending to server

6 points
Created by:
Kate_C
2943

In this article we would like to show how to correct orientation for JPG / JPEG image before sending to server using JavaScript (in web browser).

The problem occurs when we have devices that have built-in orientation sensors and pictures are made in different phone position. Some software on devices do not correct it automatically when we send it via web borwser and is necessary to do it somehow - we need to know on what devices correction is needed!

By default orientation for JPEG is placed inside Exif Metadata that are attached to picture file. There are some libaries that let us to read that informations and rotate picture by self, but it can be difficult because rotation is necessary only on some devices and we need to know when rotation is needed.

There is some trick that solves the problem in easy way:

  1. drawing image on canvas,
  2. saving it back,
  3. sending image to server.

It works because HMTL img element has built-in rotation support before displaying it.

So you can use it with canvas and extract corrected image data to send it.

The approach works in all browsers and we can select high quality for our pictures.

Example code:

// 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>

Note: check this article if URL object is not supported.

Hey ūüĎč
Would you like to know what we do?
  • Dirask is online IT community for professionals and hobbyist to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.