Jump to content

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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...