Jump to content

Image orientation and EXIF


Mad_Griffith

Recommended Posts

Hi! I am using the exif.js library to detect the input image's EXIF, to cope with the mobile devices camera orientations.

 

The trouble I am encountering is that I don't seem to be able to override EXIF case "0", the standard portrait mode for both front and back camera. This is my relevant code:

 

 

		var orientation;
		
		EXIF.getData(profileImg, function() {
		
			orientation = EXIF.getTag(this, "Orientation")
		
		});
		
		context.save();
		orientateContext();
		
		(function animationLoop(event) {
			
			renderProfileImg(event);
			context.restore();
			renderBadgeImg();
			requestAnimationFrame(animationLoop, profileImg);

		})()


...

function orientateContext(orientation) {

	switch (orientation) {
		case 2:
			// horizontal flip
			context.translate(canvas.width, 0);
			context.scale(-1, 1);
			break;
		case 3:
			// 180° rotate left
			context.translate(canvas.width, canvas.height);
			context.rotate(Math.PI);
			break;
		case 4:
			// vertical flip
			context.translate(0, canvas.height);
			context.scale(1, -1);
			break;
		case 5:
			// vertical flip + 90 rotate right
			context.rotate(0.5 * Math.PI);
			context.scale(1, -1);
			break;
		case 0, 6, 90:
			// 90° rotate right
			context.rotate(0.5 * Math.PI);
			context.translate(0, -canvas.height);
			break;
		case 7:
			// horizontal flip + 90 rotate right
			context.rotate(0.5 * Math.PI);
			context.translate(canvas.width -canvas.height);
			context.scale(-1, 1);
			break;
		case 8, -90:
			// 90° rotate left
			context.rotate(-0.5 * Math.PI);
			context.translate(-canvas.width, 0);
			break;
		default:
			break;
	}

}

 

Edited by Mad_Griffith
Link to comment
Share on other sites

I am now using this and at least I manage to alert the ":)". The context is not rotated nor translated, though...

 

function orientateContext(orientation) {

switch (orientation) {
case 0, undefined && (screen.innerHeight > screen.innerWidth):
alert(':)');
context.rotate(0.5 * Math.PI);
context.translate(0, -canvas.height);
break;

...
Link to comment
Share on other sites

Get orientation value before messing with switch.

 

Using id ref

            window.onload = function() {
                var target_image = document.getElementById("img1");

                EXIF.getData(target_image, function() {
                    var orientation = EXIF.getTag(target_image, "Orientation");
                    alert("Orientation reference is:  " + orientation);
                });
            }
Edited by dsonesuk
Link to comment
Share on other sites

 

Get orientation value before messing with switch.

 

Using id ref

            window.onload = function() {
                var target_image = document.getElementById("img1");

                EXIF.getData(target_image, function() {
                    var orientation = EXIF.getTag(target_image, "Orientation");
                    alert("Orientation reference is:  " + orientation);
                });
            }

 

thank you, I could troubleshoot and the orientation number is 6: the picture is rotated 90° to the right.

 

In the code I posted at the beginning of this thread I have now something like the following and it should fix the rotation I reckon, but it doesn't!

         case 6:
            // 90° rotate right
            context.rotate(0.5 * Math.PI);
            context.translate(0, -canvas.height);
            break;
Edited by Mad_Griffith
Link to comment
Share on other sites

You need to rotate 90 (not 0.5) degrees clockwise don't you? 6 means top of camera is to right, the image right edge is at top, to bring to correct orientation rotate 90 degrees bring image top edge back to right as when taken by camera.

Edited by dsonesuk
Link to comment
Share on other sites

Yes, the reference appears to be correct.

 

I found out that commenting out context.save() and context.restore() (like in the code below) allows profileImg to be rotated and translated, but the side effect is that renderBadgeImg(), which renders an overlay image on the profileImg, is also affected - and it shouldn't.

		var orientation;
		
		EXIF.getData(profileImg, function() {
		
			orientation = EXIF.getTag(this, "Orientation");
// 			alert(orientation);
		});
			
			//context.save();
			orientateContext(orientation);
		
		(function animationLoop(event) {
			
			renderProfileImg(event);
			//context.restore();
			renderBadgeImg();
			requestAnimationFrame(animationLoop, profileImg);

		})()
Edited by Mad_Griffith
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...