Improper rotation while overlaying image

Vijay Keswani

May 23, 2017 14:33

Hi,

I am seeing an erratic behaviour while applying rotation to an overlayed image. 

Below are two URLs representing this behaviour : 

Without rotation :

http://res.cloudinary.com/demo/image/upload/l_cloudinary_icon,w_190,x_0,y_0,g_north_west,a_0/sea_shell.jpg

With rotation :

http://res.cloudinary.com/demo/image/upload/l_cloudinary_icon,w_190,x_0,y_0,g_north_west,a_-45/sea_shell.jpg

The image with rotation has the overlayed object smaller than the one without rotation. Also the image after rotation seems to have an extra padding on the edges (possibly because default rotation would result in the overlayed image overflowing beyond the image boundaries?)

If possible, please explain this behaviour since right now we are unable to rotate and set overlayed images according to the parameters we are sending.

Thanks,
Vijay Keswani

0

• 

  Shirly Manor

  May 23, 2017 22:48

  Hi Vijay,

  Thank you for reaching out!

  Differences between those images happen because you have width (or height) on the same component as a_ (angle), As a result the bounding box is forced to 190, causing the a_-45 image to look smaller than the a_0 one.

  You can use the angle after creating the width and decide the location. For example:

  http://res.cloudinary.com/demo/image/upload/l_cloudinary_icon,w_190,x_0,y_0/a_-45/g_north_west,fl_layer_apply/sea_shell.jpg

   

  Hopes that helps. Thank you for a great question!

  Shirly

  0
• 

  Vijay Keswani

  May 25, 2017 07:57

  Hi Shirly,

  In the attached image

  http://res.cloudinary.com/demo/image/upload/l_cloudinary_icon,w_190,x_0,y_0/a_-45/g_north_west,fl_layer_apply/sea_shell.jpg

  the co-ordinates provided are x_0, y_0 but the image is still not on the edge.

  The main concern for us is that we were expecting that with these co-ordinates the image after rotation would be on the boundary. Can you tell us how that achieve that?

  Vijay

  0
• 

  Shirly Manor

  May 26, 2017 21:58 Edited

  Hi Vijay,

  
  In the attached image:

  http://res.cloudinary.com/demo/image/upload/l_cloudinary_icon,w_190/a_-45/g_north_west,x_-0.04,fl_no_overflow,fl_layer_apply/sea_shell.jpg

  It puts the overlay 4% to the left relative to its bounding box (which is centered on the northwest).
  Few things to note:
  1. The x parameter is applied to the layer, and not the image overlay itself.
  2. The no_overflow flag is used to eliminate the canvas extension that is caused when moving the overlay
  3. This percentage would change for different images. as the northwest center would be different for each image.

  Let me know if you need anything else

  Shirly

  0
• 

  Shirly Manor

  May 26, 2017 22:14

  Hi Vijay,

  A different way to solve it is by using e_trim

  http://res.cloudinary.com/demo/image/upload/l_cloudinary_icon,w_190/a_-45,e_trim/g_north_west,fl_layer_apply/sea_shell.jpg

  Adding e_trim will remove the extra spacing from the coudinary_icon image.

  for more information please check the effect reference here.

  Please let me know if you have any further questions,

  Shirly

  0

Post is closed for comments.