Img reloading not refresh width and height drag boundaries

[mauromorello]

I need to add the ability to rotate image after loaded, using an external button. I found a piece of code that is able to do that by creating a hidden canvas and returning png data, but when I pass it to the cropic object (like you do in your demo page) cropit seems still keeping the old one. Also when I destroy and create again another istance not work as I expect. I think manual rotating an image is a important feature because a lot mobile devices are not managing well exif/orientation data. And thanks for your work.

[mauromorello]

shame on me!

// Sets image source. $imageCropper.cropit('imageSrc', 'http://placekitten.com/g/1280/800');

but after loaded the new one, it seems not refreshing how "can I move" inside the img when I'm zooming, remembering old width and height. In this specific case, I load an horizontal image (i.e. 800x200), then I rotate by 90° and reload in same cropit object. This work, but as I start zooming I notice that I can move only in horizontal direction, but now the image (200x800) need to be dragged in vertical way.

[mauromorello]

This is my snippet, take from "picademo" and from everywhere on the internet. My scope is to rotate the image, clicking on .cropit-turn, by 90°. Notice that BEFORE and AFTER rotation (working) the width and tje height are the same.

var $editor = $('.image-editor'); $editor.cropit({smallImage:'allow',width:250,height:250,exportZoom:1.2,initialZoom:'min'}); $('.cropit-turn').click(function() { console.log("IMG PRE:"+$editor.cropit('imageSize').width+" y:"+$editor.cropit('imageSize').height);

        var imgSrc = $editor.cropit('imageSrc');
        var img = new Image();
        img.src = imgSrc;
        var originalWidth = $editor.cropit('imageSize').width;
        var originalHeight = $editor.cropit('imageSize').height;

        // ROTATE
        var degrees=90;
        var rads=degrees*Math.PI/180;
        var newWidth, newHeight;
        var c = Math.cos(rads);
        var s = Math.sin(rads);
        if (s < 0) { s = -s; }
        if (c < 0) { c = -c; }
        newWidth = originalWidth * s + originalWidth * c;
        newHeight = originalHeight * c + originalHeight * s;
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext("2d");
        canvas.width = parseInt(newWidth, 10);
        canvas.height = parseInt(newHeight, 10);
        var cx=canvas.width/2;
        var cy=canvas.height/2;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.translate(cx, cy);
        ctx.rotate(rads);
        ctx.drawImage(img, -originalWidth / 2, -originalHeight / 2);

        var picaImageData = canvas.toDataURL();

        $editor.cropit('imageSrc', picaImageData);
        console.log("IMG AFTER:"+$editor.cropit('imageSize').width+" y:"+$editor.cropit('imageSize').height);
    });