I am facing an issue with rotating and resizing an image using an HTML5 form. The rotation angle can be adjusted in steps of 90 degrees, but the image should always remain 770px wide regardless of its orientation (landscape or portrait).
Despite creating an event handler for this purpose, I have noticed that the function does not work as expected. When rotating a portrait image by 90 degrees, the width and height values are both set to 770px instead of switching according to the rotation.
To help you understand better, consider this use case: Initially, when the image is in portrait mode, it has dimensions of 770x1027 (w x h). After rotating it by 90 degrees, ideally the function should rotate the image and set the new dimensions to width = 1027px and height = 770px. However, currently, both width and height are being set to 770px only.
$("#degrees").change(function(){
var element$ = $("#photo-submission"),
w = element$.width(),
h = element$.height(),
deg = $(this).val();
element$.removeAttr("style").attr({
"style": "-webkit-transform:rotate("+ deg +"deg); width: "+ h +"px; height: "+ w + "px;"
})
});