Make Jcrop tracker not rotate when cropping a rotated image

Question

I am trying to crop the image using Jcrop, but when I use jqueryrotate on the image, something strange happens.

I rotate the image 90, then activate JCrop, JCrop does not follow the rotation of the image, so I also rotate the Jcrop holder. The resulting image is fine, but when I select the section to crop, I noticed that my tracker is also rotated. When I drag it, it goes to the right; when I drag it to the left, it drops.

What's happening

Then it goes How to make the crop selection tool vertical?

My html:

<div class="img-canvas" style="background-color:#cccccc;" > <img id="image_canv" src="<?php echo $imagesource;?>"> </div> 

My jQuery:

 $('#rotatephoto').click(function () { value += 90; JcropAPI = $('#image_canv').data('Jcrop'); if(JcropAPI != null) { JcropAPI.destroy(); } var h = $('.img-canvas').height(); var w = $('.img-canvas').width(); $('.img-canvas').css("position","fixed"); $('.img-canvas').css("width",w); $('.img-canvas').css("height",h); $('#image_canv').Jcrop({ onSelect: showCoords2, onChange: showCoords2, setSelect: [ 0, 100, 50, 50 ] }); JcropAPI = $('#image_canv').data('Jcrop'); JcropAPI.enable(); var h2 = $('.jcrop-holder').height(); var w2 = $('.jcrop-holder').width(); if(h2 < 630) { var tempp = (630 - h2)/2; $('.jcrop-holder').css("margin-top",tempp); } if(w2 < 630) { var tempp = (630 - w2)/2; $('.jcrop-holder').css("margin-left",tempp); } $('.jcrop-holder').rotate(value); $("#image_canv").rotate(value); }); 

Answer 1

Yes, JCrop has a problem with the selection direction error after turning on jQuery. I had to solve this by modifying JCrop js code to support rotation.

Fortunatly, this is not difficult to do, you can do it yourself by replacing one line: 136 with subcodes:

  //========= begin replace origin line 136 for rotate var x = pos[0] - lloc[0]; var y = pos[1] - lloc[1]; var rotate = options.rotate || 0; var angle = (rotate / 90) % 4; if (angle == 1) { var temp = x; x = y; y = - temp; } else if (angle == 2) { x = -x; y = -y; } else if (angle == 3) { var temp = x; x = -y; y = temp; } Coords.moveOffset([x, y]); //========= end replace origin line 136 for rotate 

or you can get the updated code at the URL: https://github.com/ergoli/Jcrop/tree/master/js

Be careful! you must transfer the rotation parameter after each rotation:

 jCropApi.setoptions({rotate : 90}); //rotate 90 

Good luck

Answer 2

I jumped from ergoli, but instead of jquery rotate, I used css classes, for example:

 .rotate90{ /* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* IE */ -ms-transform: rotate(90deg); /* Opera */ -o-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } 

Then I made similar classes for 180 and -90.

It seemed to me that it was easier to change the mouseAbs function

 function mouseAbs(e) //{{{ { switch (options.rotate) { case 90: return [(e.pageY - docOffset[1]), -(e.pageX - docOffset[0] - options.imgHeight)]; break; case 270: return [(e.pageY - docOffset[1]), -(e.pageX - docOffset[0] - options.imgHeight)]; break; case -90: return [-(e.pageY - docOffset[1] - options.imgWidth), (e.pageX - docOffset[0] )]; break; case 270: return [-(e.pageY - docOffset[1] - options.imgWidth), (e.pageX - docOffset[0] )]; break; case 180: return [-(e.pageX - docOffset[0]- options.imgWidth), -(e.pageY - docOffset[1] - options.imgHeight)]; break; case -180: return [-(e.pageX - docOffset[0]- options.imgWidth), -(e.pageY - docOffset[1] - options.imgHeight)]; break; default: return [(e.pageX - docOffset[0]), (e.pageY - docOffset[1])]; break; } } 

It was just necessary to make sure that my .jcrop holder has the correct rotation class at the right time and initializes jcrop with rotation and image parameters.

 this.image.Jcrop({ rotate: that.angle, imgHeight: that.image.height(), imgWidth: that.image.width(), onSelect: function(c){ that.x1 = cx; that.x2 = c.x2; that.y1 = cy; that.y2 = c.y2; that.w = cw; that.h = ch; } }); 

This is not a particularly elegant solution, but its work is currently underway.

Answer 3

Recently, I also tried to implement this, but could not find the approaches mentioned in other answers that work the way I wanted. In particular, I had problems with changing the size of the crop when it is rotated. I studied the Jcrop update to fix this problem, but decided that the alternative would be simpler.

Instead, I decided to rotate the images outside of Jcrop using the JavaScript Load Image library, and then crop the rotated image. The loadImage method uses an orientation option that can be used to perform rotation. Depending on what you are trying to do, you may later need to convert the result, but I found this to be easier than messing around with Jcrop internals.

Answer 4

I used Dan's approach as a jumping point, but I don't have enough reputation to comment on Dan Baker, so I give a different answer. Its mouseAbs function did not work for me at all, I changed it like this:

 function mouseAbs(e) { switch (options.rotate) { case 90: return [(e.pageY - docOffset[1]), -(e.pageX - docOffset[0])]; case 180: return [-(e.pageX - docOffset[0]), -(e.pageY - docOffset[1])]; case 270: return [-(e.pageY - docOffset[1]), (e.pageX - docOffset[0])]; default: return [(e.pageX - docOffset[0]), (e.pageY - docOffset[1])]; } } 

Everything else was the same. Passed in the current rotation to the Jcrop object when it was initialized, and I applied the rotation c class q of rotation to the .jcrop-holder element.

Answer 5

Please take a look at this. This works great. Thanks ergoli. I used my logic on top of the updated JCrop ergoli file. https://github.com/prijuly2000/Image-RotateAndCrop-app

Changed to add JS code:

 var jcrop_api; var angle = 0; function checkCoords() { if (parseInt($('#w').val())) return true; alert('Please select a crop region then press submit.'); return false; }; function rotateLeft() { angle -= 90; $(".jcrop-holder").rotate(angle); jcrop_api.setOptions({ rotate: angle < 0 ? 360 + angle : angle }); if (angle <= -360) angle = 0; } function rotateRight() { angle += 90; $(".jcrop-holder").rotate(angle); jcrop_api.setOptions({ rotate: angle }); if (angle >= 360) angle = 0; } function updateCoords(c) { $('#x').val(cx); $('#y').val(cy); $('#w').val(cw); $('#h').val(ch); $('#d').val(angle); }; function showImage(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $("#image").attr("src", e.target.result).Jcrop({ onChange: updateCoords, onSelect: updateCoords, boxWidth: 450, boxHeight: 400 }, function() { jcrop_api = this; }); }; reader.readAsDataURL(input.files[0]); } }