Member Avatar for nadiam

hi guys. is there a plugin or jquery ui that i missed that would allow a user to resize width or height of image/element and rotate image/element? resize something other than .resizable() . i found this for rotation it uses canvad tag and DXImageTransform.Microsoft.BasicImage. is there any other? TIA!

  • 2 Contributors
  • 3 Replies
  • 729 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by AleMonteiro

Dani AI

Generated

asked for a UI where users can pull an edge to change width/height and also rotate an image by fixed angles. was right to point at jQuery UI for the resize part — the practical decision you need to make is whether rotation should be visual-only (fast, reversible) or permanent (pixel data changed).

A simple, robust pattern: make the container resizable and rotate the image inside it. That keeps jQuery UI working on predictable element dimensions and lets you swap width/height when the image is turned 90/270 degrees.

HTML structure example:

<div class="wrap">
  <img id="photo" src="...">
</div>

Resizable + rotate (visual only):

$('.wrap').resizable({ handles: 'e, s' /* or 'e,w,n,s' */ });

var angle = 0;
$('#rotate90').on('click', function(){
  angle = (angle + 90) % 360;
  $('#photo').css({ transform: 'rotate(' + angle + 'deg)', transformOrigin: 'center center' });
  if (angle % 180 !== 0) {
    var w = $('.wrap').width(), h = $('.wrap').height();
    $('.wrap').css({ width: h, height: w }); // swap container dims for 90/270
  }
});

If you need to produce a new image file (so rotation persists or you want correct EXIF/orientation), draw the image into a canvas at the rotated size and export with canvas.toDataURL(). Important: cross-origin images require img.crossOrigin = 'Anonymous' and CORS headers on the server or the canvas export will be blocked.

Troubleshooting tips: CSS transform does not change layout box metrics — that’s why the wrapper pattern is simpler. After swapping dims re-init or refresh any UI widgets if handles misalign. For modern touch/gesture support consider a library that natively supports rotate+resize handles; for legacy IE hacks (DX filters) avoid them today — prefer CSS transforms and canvas for broad compatibility.

Recommended Answers

All 3 Replies

Member Avatar for nadiam

thanks for the suggestions. but for resizing i was wondering if there are others besides jquieryui resizable like a window u can pull left or right to increase/decrease the width or pull up/down to increase/decrease the height. and for rotation i didn't mean animation rotation. more like the user can rotate an image 90 degree or 180 degree if they wanted to like the link in OP.

Member Avatar for AleMonteiro

What you described is jqueryui Dialog widget.

For rotation, I don't know any plugins, but you can try something like this:
http://jsfiddle.net/d039q06t/

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.