Languages
[Edit]
EN

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

6 points
Created by:
cory
1486

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

The problem occurs when we have devices that have built-in orientation sensors and pictures are made in different phone positions. Some software on devices does not correct it automatically when we send it via web browser 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 is attached to the picture file. There are some libraries that let us to read that information and rotate pictures 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 an easy way:

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

It works because the 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 set high quality for our pictures before extracting them back from canvas.

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.

Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join