Image rotation and Jcrop.js

Question

I need to rotate a image firstly and after call to Jcrop with this image rotate. The problem is that if I rotate a image with css properties or something similar when I call Jcrop is not with the rotate image is allways cropping with the originals properties.

Any help, please?

Answer 1

If you don't have a CORS (cross origin request) problem with the image (ie the image is on the same domain as the webpage or you can control the domain that the image is on and put an Access-Control-Allow-Origin header on the image), then you can rotate the image on a canvas before using JCROP.

var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
var img = document.getElementById('image1');
ctx.translate(canvas.width/2,canvas.height/2);
crx.rotate(180*Math.PI/180);
ctx.drawImage(img, -cache.width / 2, -cache.height / 2);