jCrop fails to initialise cropping at first time on some browsers

Question

I've been trying to create simple avatar change/crop/upload functionality with jCrop and PHP. Everything is working perfectly on Chrome and Opera, but it fails on Safari, Firefox and Internet Explorer (all are last versions). So here is the problem - when I try to change my avatar and cropping is initialised on Chrome and Opera it looks like this: Chrome and Opera cropping

And when I try to do the same on Firefox, Safari or Internet Explorer this is happening: Firefox, Safari and Internet Explorer cropping

So my implementation is quite simple i just make ajax call with chosen image with HTML5 FormData API then PHP is handling the request make a temporary file and return Base64 encoded image which i show and trying to crop. When my ajax call have success response i simply do:

initializeCropping: function() {
        var _this = this;

            this.image.Jcrop({
                onSelect: function(coords) {
                    _this.trackCoordinates(coords);
                },
                bgColor: 'black',
                bgOpacity: .4,
                minSize: [300, 300],
                setSelect: [ 0, 0, 300, 300 ],
                aspectRatio: 1,
                boxWidth: 310,
                boxHeight: 310
            }, function() { _this.jCropApi = this; });
    }

("this.image" is reference to jQuery selector to already created image object) I also tried to set some timeout with javascript before initialising jCrop regarding this question, but the result is the same.. Any ideas? Thank you in advance! :)

Edit: It works only when select the same image second time...

score 1 · Answer 1 · answered Jun 03 '14 at 08:25

I think i have faced the same kind of problem if i understood correctly

try calling this function each time you completed the crop or if he closes the jcrop with or with out performing a crop. In my case i have made an ajax call to show the image in a modal and then allow user to use jcrop and on save and cancel and escape i called this destroyCropData() function

function destroyCropData() {
        debugger;
        var prevDim = window.jcropVar;
        prevDim.destroy();
        $("#txtHeight").val("");
        $("#txtWidth").val("");
        $("#txtXpos").val("");
        $("#txtYpos").val("");
    }

and also try to save the value of this in a global variable that makes your code

initializeCropping: function() {
    var jcrop_api;

        this.image.Jcrop({
            onSelect: function(coords) {
                _this.trackCoordinates(coords);
            },
            bgColor: 'black',
            bgOpacity: .4,
            minSize: [300, 300],
            setSelect: [ 0, 0, 300, 300 ],
            aspectRatio: 1,
            boxWidth: 310,
            boxHeight: 310
        }, function() { jcrop_api = this; window.jcropVar = jcrop_api;});
}

Hope this is what you are asking for. Sorry if this is not what you are expecting

But why do I need to store global variables when i want they to work just for that scope? — fre2ak, Jun 04 '14 at 06:26
in that case you dont need global var but if the function in where you have to clear the old co-ordinates is not in that scope then i think we should go with a global var. — Vivekh, Jun 04 '14 at 08:08
Mm ok, i keep my coordinates in JavaScript object not in DOM and they get replaced every time when you initialise cropping by `trackCoordinates(coords)` method. I also tried to destroy jCrop but it just isn't working on some browsers. — fre2ak, Jun 04 '14 at 08:47

score 0 · Accepted Answer · answered Jun 04 '14 at 12:46

0

Actually i figure it out. There was a problem with the css which only Opera and Chorme handle it. The image was some fixed with and height and then the box properties of jCrop weren't working. Thank you for you help anyway.

answered Jun 04 '14 at 12:46

fre2ak

329
2
8
18

jCrop fails to initialise cropping at first time on some browsers

2 Answers2