JCrop in IE10, 9 & 8 probleem

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Dennis Lommerde

Dennis Lommerde

11/06/2013 11:39:14
Quote Anchor link
In Internet Explorer werkt de JCrop niet.
De afbeelding word niet weergegeven maar deze word wel opgehaald maar de jcrop_api2.setImage(); doet niets.

Dit is in Chrome:
http://d.pr/i/Rnsz

Dit is in IE:
http://d.pr/i/SLTk

Iemand een idee hoe ik het ook werkend kan krijgen in IE?

Code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
    var jcrop_api2;
    //logo editing
    $('.bedrijvenlogo').click(function(){
        var bedrijf_id = $(this).attr('rel');
        $('.saveeditbedrijvenlogo').attr('rel', bedrijf_id );
        $('.bedrijf_id').val(bedrijf_id);

        var bedrijf_naam = $('.bedrijvennaam[rel="'+bedrijf_id+'"]').html();
        $('.jcropformtitel').html("Bedrijfslogo wijzigen van " + bedrijf_naam);

        var parturl = $('.abedrijfurlrealsize').val();
        var pathrs = $('.abedrijfpathrealsize').val();
        var defaultbpath = $('.defaultbpath').val();

        $.ajax({
            type: "POST",
            url: "<?php echo Settings::$url;?>/"+ReadCookie('lang')+"/ajax/profile/checklogo",
            data: { pathrs : pathrs, bedrijf_id : bedrijf_id },
            success: function(url){
                console.log(url);
                if(url == defaultbpath){
                    if(jcrop_api2) jcrop_api2.destroy();
                    $('.logo-preview-pane').hide();
                    $('.logo-crop-size').append("<img src='"+url+"' class='defaultlogo' />");
                } else {
                    $('.defaultlogo').remove();
                    if(jcrop_api2) jcrop_api2.destroy();
                    initJcrop();
                    if(jcrop_api2) jcrop_api2.setImage(url + "?t=" + (Math.random()));
                    $('.logo-jcrop-preview').attr('src', url + "?t=" + (Math.random()));
                }
            }
        });

        $('.bedrijvenlogoform').delay(300).fadeIn(300);
        $('.bedrijvenblurreffect').delay(300).fadeIn(300);
    });

    //vars voor setSelect
    var x_pos = $('.logo_x_pos').val();
    var y_pos = $('.logo_y_pos').val();
    var width = $('.logo_width').val();
    var height = $('.logo_height').val();

    if(width == 0){
        var width = 175;
        var height = 125;
    }

    // Grab some information about the preview pane
    $logopreview = $('.logo-preview-pane'),
    $logopcnt = $('.logo-preview-pane .logo-preview-container'),
    $logopimg = $('.logo-preview-pane .logo-preview-container img'),

    xsize = $logopcnt.width(),
    ysize = $logopcnt.height();

    function initJcrop(){
        $('.logo-cropbox').Jcrop({
            setSelect: [ x_pos, y_pos, x_pos + width, y_pos + height ],
            minSize: [175,125],
            onChange: logoupdatePreview,
            onSelect: logoupdatePreview,
            onSelect: logoupdateCoords,
            aspectRatio: xsize / ysize
        },function(){
            // Store the API in the jcrop_api variable
            jcrop_api2 = this;
        });
    };

    //uploadenlogo
    $('.logoimg').live('change', function()
    {
        var bedrijf_id = $('.bedrijf_id').val();
        $('.logoform').ajaxSubmit({
            type: "POST",
            url: "<?php echo Settings::$url;?>/"+ReadCookie('lang')+"/ajax/profile/uploadlogo",
            data: { bedrijf_id : bedrijf_id },
            success: function(){
                var reallogo = $('.abedrijfurlrealsize').val();
                var imgname = $('.bedrijf_id').val();
                $('.defaultlogo').remove();
                $('.logo-preview-pane').show();
                if(jcrop_api2) jcrop_api2.destroy();
                initJcrop();
                jcrop_api2.setImage(reallogo + imgname + ".png?t=" + (Math.random()));
                $('.logo-jcrop-preview').attr('src', reallogo + imgname + ".png?t=" + (Math.random()));
            }
        });
    });

    //logoedit opslaan
    $('.saveeditbedrijvenlogo').click(function(){
        var bedrijf_id = $(this).attr('rel');
        var abedrijfurl = $('.abedrijfurl').val();
        var abedrijfurlrealsize = $('.abedrijfurlrealsize').val();
        var abedrijfpath = $('.abedrijfpath').val();
        var burl = abedrijfurl+bedrijf_id+".png";
        var burlrealsize = abedrijfurlrealsize+bedrijf_id+".png";
        var bpath = abedrijfpath;
        var x = $('.logo_x').val();
        var y = $('.logo_y').val();
        var w = $('.logo_w').val();
        var h = $('.logo_h').val();

        $.ajax({
            type: "POST",
            url: "<?php echo Settings::$url;?>/"+ReadCookie('lang')+"/ajax/profile/savelogo",
            data: {
                bedrijf_id : bedrijf_id,
                burlrealsize : burlrealsize,
                bpath : bpath,
                x : x,
                y : y,
                w : w,
                h : h
            },
            success: function(){
                $('.bedrijvenlogoform, .bedrijvenblurreffect').fadeOut(300);
                $('.bedrijvenlogosize[rel="'+bedrijf_id+'"]').delay(1000).fadeOut(300, function(){
                    $('.bedrijvenlogosize[rel="'+bedrijf_id+'"]').remove();
                    $('.bedrijvenlogopos[rel="'+bedrijf_id+'"]').append("<div class='bedrijvenlogosize' style='background: #fff url(" + burl + "?t=" + (Math.random()) + ") center no-repeat;'' rel='"+bedrijf_id+"']></div>");
                });
            }
        });
    });

    function logoupdatePreview(c)
    {
        if (parseInt(c.w) > 0)
        {
            var rx = xsize / c.w;
            var ry = ysize / c.h;

            var tmp = jcrop_api2.getBounds();

            $logopimg.css({
                width: Math.round(rx * tmp[0]) + 'px',
                height: Math.round(ry * tmp[1]) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
            });
        }
    }

    function logoupdateCoords(c)
    {
        $('.logo_x').val(c.x);
        $('.logo_y').val(c.y);
        $('.logo_w').val(c.w);
        $('.logo_h').val(c.h);
    };
Gewijzigd op 11/06/2013 12:04:32 door Dennis Lommerde
 
PHP hulp

PHP hulp

26/11/2024 11:54:40
 
Chris PHP

Chris PHP

11/06/2013 12:05:41
Quote Anchor link
Als je Google gebruikt kom je al snel bij wat antwoorden uit, blijkbaar werkt het als je onSelect en onRelease toevoegd aan je object(en).

Voorbeeld script.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
$(document).ready(function () {
    var api = $.Jcrop('#cropbox', {
        aspectRatio: 1,
        onSelect: update,
        onChange: update,
        onRelease: update
    });
});

function update(c) {
    //Store coords here
}
</script>
 
Dennis Lommerde

Dennis Lommerde

11/06/2013 13:09:57
Quote Anchor link
Het werkte voor een andere crop maar niet deze.
Ik krijg nu errors dat de functies
- logoupdatePreview();
- logoupdateCoords();
niet werken.

Uncaught TypeError: Cannot read property 'x' of undefined profile.php:273
logoupdateCoords profile.php:273
release jquery.Jcrop.js:1027
setImage jquery.Jcrop.js:1436
$.ajax.success profile.php:152
e.resolveWith jquery-1.5.2.min.js:16
w jquery-1.5.2.min.js:16
d

Komt misschien omdat het in een functie staat?


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function initJcrop(){
        $('.logo-cropbox').Jcrop({
            setSelect: [ x_pos, y_pos, x_pos + width, y_pos + height ],
            minSize: [175,125],
            onChange: logoupdatePreview,
            onSelect: logoupdatePreview,
            onSelect: logoupdateCoords,
            onRelease: logoupdatePreview,
            onRelease: logoupdateCoords,
            aspectRatio: xsize / ysize
        },function(){
            // Store the API in the jcrop_api variable
            jcrop_api2 = this;
        });
    };
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.