Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Issue with incorrect rotation of image from camera service

Hello,

You can rotate image if photo's orientation (X/Y ratio) and device's orientation don't match.
get photo orientation: http://stackoverflow.com/questions/15...

get device orientation: prevar deviceY = $(window).height();
var deviceX = $(window).width()/pre

S Butler
Posts: 0
Joined: Mon Nov 17, 2014 4:44 pm

Issue with incorrect rotation of image from camera service

Hi - thanks for the reply... I am new to javascript and was curious if you could consolidate the code from the link you provided into a chunk that I could use? I'm assuming this would involve some sort of If statement? I have an image component called mobileimage_57 that would need to have it's size evaluated and compared to the device then rotated if needed... Any help would be greatly appreciated.

Thanks!

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Issue with incorrect rotation of image from camera service

Hello,

You can just check whether device width more then device height.

Example of code:

'''

var deviceY = $(window).height();prevar deviceX = $(window).width()/pre
if(deviceX > deviceY){

//here you can make a logic when width more then height

}
else{

//here you can make a logic when width less then height

};

'''

Regards.

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Issue with incorrect rotation of image from camera service

Hello,

You can just check whether device width more then device height.

Example of code:

pre

var deviceY = $(window).height();
var deviceX = $(window).width()

if(deviceX deviceY){

//here you can make a logic when width more then height

}
else{

//here you can make a logic when width less then height

};

/pre

Regards.

S Butler
Posts: 0
Joined: Mon Nov 17, 2014 4:44 pm

Issue with incorrect rotation of image from camera service

Hi,

Thanks for the info, but what is the code to rotate the image component (mobileimage_57) that I can place in the if statement when the comparison is true?

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Issue with incorrect rotation of image from camera service

Hello,

You need to use transform rotate CSS style to rotate the image.

Please read more about this style here: http://www.w3schools.com/cssref/css3_...

Regards

S Butler
Posts: 0
Joined: Mon Nov 17, 2014 4:44 pm

Issue with incorrect rotation of image from camera service

Hi,

Thanks for the link, but I am not having any success.. Can you please provide some example of code that I can use to rotate an image component 90 degrees... I tried this and it didn't work:

Apperyio('mobileimage_29').css(WebkitTransform = "rotate(90deg)");

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Issue with incorrect rotation of image from camera service

Hello,

Please use this JS:

preApperyio("mobileimage_29").css('-webkit-transform', 'rotate(90deg)');/pre

S Butler
Posts: 0
Joined: Mon Nov 17, 2014 4:44 pm

Issue with incorrect rotation of image from camera service

Hi, thanks for the reply and it looks like the code above does in fact rotate the image, however, this is causing the image to overlap other components on the page and the height/width of the image does not change to its true height/width after being rotated. Can you please let me know next steps? See image below. One additional question:

1) Appery.io should be recognizing the orientation in which the photo was taken. This would solve the problem and I have not heard back why this is not happening. Is the correctOrientation PhoneGap parameter set to True on the Appery platform? This was the original topic of this thread and have not been told if this was implemented or not. Can you please let me know?

Image

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Issue with incorrect rotation of image from camera service

Hi Sean,

Unfortunatly such logic is not implemented with Appery.io code. Thus you need to implement it yourself in accordance to your needs.

Please try following:

1 Add HTML component on the page.

2 Make this html component as "Div" type.

3 Set this component dimensions with 400px and 400px.
Details: http://prntscr.com/883nyg/direct

4 Put image inside this html component.

5 Set image dimensions as "400px" and "auto".

Regards.

Return to “Issues”