Mad_Griffith Posted July 17, 2016 Share Posted July 17, 2016 (edited) 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 July 17, 2016 by Mad_Griffith Link to comment Share on other sites More sharing options...
Mad_Griffith Posted July 18, 2016 Author Share Posted July 18, 2016 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 More sharing options...
dsonesuk Posted July 18, 2016 Share Posted July 18, 2016 What does 'profileImg' refer to? img id, image location in input? Link to comment Share on other sites More sharing options...
dsonesuk Posted July 18, 2016 Share Posted July 18, 2016 (edited) 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 July 18, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
Mad_Griffith Posted July 18, 2016 Author Share Posted July 18, 2016 (edited) . Edited July 18, 2016 by Mad_Griffith Link to comment Share on other sites More sharing options...
Mad_Griffith Posted July 18, 2016 Author Share Posted July 18, 2016 (edited) 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 July 18, 2016 by Mad_Griffith Link to comment Share on other sites More sharing options...
dsonesuk Posted July 18, 2016 Share Posted July 18, 2016 (edited) 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 July 18, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
Mad_Griffith Posted July 18, 2016 Author Share Posted July 18, 2016 (edited) I took it from here, it should work... https://github.com/blueimp/JavaScript-Load-Image/blob/master/js/load-image-orientation.js Edited July 18, 2016 by Mad_Griffith Link to comment Share on other sites More sharing options...
dsonesuk Posted July 19, 2016 Share Posted July 19, 2016 Well it works for filled rectangle, so it should work for image rotation,. Just make sure '-canvas.height' is reference to canvas the image is in. Link to comment Share on other sites More sharing options...
Mad_Griffith Posted July 19, 2016 Author Share Posted July 19, 2016 (edited) 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 July 19, 2016 by Mad_Griffith Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now