IE8 and IE9 initializing crop via ajax

[jamroco2000]

Hi there,

There seems to be an issue with crop in IE8 and 9. Works great everywhere else. I have a system where the user uploads an image and then afterwards they pick the crop position and zoom they want on the image (essentially creating a profile pic).

I call crop as follows after a success message from my ajax upload script. It looks like this

$("#my-mask").html("img class=\"crop\" src=\"assets/large/" + obj.msg + "\"/");

                    $( '.crop' ).each( function () {
                        var image     = $( this )
                            , crop    = image
                                .crop( {
                                    width      : 220
                                    , height   : 220
                                    , loading  : '.....'
                                    , controls : 'Drag to move, scroll to zoom'
                                } )
                                .on( 'crop', function( event ) {
                                    $('#crop_x').val( event.cropX );
                                    $('#crop_y').val( event.cropY );
                                    $('#crop_w').val( event.cropW );
                                    $('#crop_h').val( event.cropH );

                                    $('.cropX').text( event.cropX );
                                    $('.cropY').text( event.cropY );
                                    $('.cropW').text( event.cropW );
                                    $('.cropH').text( event.cropH );
                                } )
                                .data( 'crop' );
                        image
                            //.on( 'dblclick', $.proxy( crop.zoomIn, crop ) )
                            .on( 'mousewheel', function ( event ) {
                                return event.originalEvent.wheelDelta < 0 ? 
                                    crop.zoomIn() :
                                    crop.zoomOut();
                            } );
                    } );

My mask is the div where I put the image in for people to see and move around.

For some reason in IE8 and 9 - the image appears - the controls are there - but nothing works and does a weird scaling to the image leaving a big gap at the bottom. Also it always updates crop x and y as 0 each and crop w and crop h as 28 each.

Screen shot attached:

Any ideas?

[jamroco2000]

I had to remove the <> from the img tag as git hub tried to render it as an actual image for some reason

[adriengibrat]

hi, first you should not use the demo code just like that, for your needs code could be much simpler:

var mask_crop = $('#my-mask img')
    .crop({
        width      : 220
        , height   : 220
        , loading  : '.....'
        , controls : 'Drag to move, scroll to zoom'
    })
    .on('mousewheel', function( event ) {
        return event.originalEvent.wheelDelta < 0 ? 
            mask_crop.zoomIn() :
            mask_crop.zoomOut();
    });

And for your problem, i cannot help you right now: i don't have ie at home or at work... i'm only using chrome & firefox. As soon as i can try my code on ie i'll see what i can do.

Do you have js error when you check the dev tools (http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx)?

[adriengibrat]

you should check issue #1, maybe it's a css rules that mess with the plugin. the last commit may solve some issues.

[jamroco2000]

yeah I'm the same as you - I'm on a mac - so really my world is chrome and firefox as well - hate IE with a passion.

There is no javascript error or anything within the console - that is the weird thing. I also put in an alert on the fill method - and when I tried to grab the image - the alert dialog went nuts - so your code is firing.

I tried the css fix u patched an hour ago - no fix either.

[jamroco2000]

Oh thanks for the optimized code :-)

[jamroco2000]

oh one more thing - I had the same issue with jWindowCrop - I tried yours thinking your fork fixed it :-)

[adriengibrat]

Hum... so the bug is a css pb, for sure. IE sucks ;)

[jamroco2000]

Must be - let me know if you figure something out.. Thanks for your help

[ciastek]

Official IE virtual machines - http://www.modern.ie/

[adriengibrat]

Thanks, Didn't thought about it. Made some test to solve IE8/9 pb. It seems it was a pb with the reserved word 'class' in JS. Once in a while, IE is right. But only once in a while, usually it sucks;)

So, it works on IE 9, and the only pb I got on IE8 is the style of the buttons ;) I'll try to fix that when I got more time. But anyone could fix it using an icons image and custom css rules

[adriengibrat]

Closing the issue, feel free to re open it