JCrop bounds blijven undefined
Deze blijven helaas undefined. Heeft iemand een idee waardoor dit komt? Code staat hieronder:
functie getBounds
Code (php)
1
2
3
2
3
getBounds: function () {
return [boundx * xscale, boundy * yscale];
},
return [boundx * xscale, boundy * yscale];
},
Controleren of logo al bestaat zo ja stuur de url van de logo door zo niet stuur een default afbeelding
en destroy() de crop zodat je de default afbeelding niet kan croppen.
Code (php)
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
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
$('.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();
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);
});
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();
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);
});
AJAX bij het bovenstaande stuk:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//logo checken
elseif($this->arguments[0] == 'checklogo')
{
$bedrijf_id = $_POST['bedrijf_id'];
$path = $_POST['pathrs'];
if(file_exists($path.$bedrijf_id.".png"))
{
$url = Settings::$url.'/uploaded/bedrijf_logo_realsize/'.$bedrijf_id.'.png';
}
else
{
$url = Settings::$url.'/images/BedrijfsLogoError.png';
}
echo str_replace('\/','/',json_encode($url));
}
elseif($this->arguments[0] == 'checklogo')
{
$bedrijf_id = $_POST['bedrijf_id'];
$path = $_POST['pathrs'];
if(file_exists($path.$bedrijf_id.".png"))
{
$url = Settings::$url.'/uploaded/bedrijf_logo_realsize/'.$bedrijf_id.'.png';
}
else
{
$url = Settings::$url.'/images/BedrijfsLogoError.png';
}
echo str_replace('\/','/',json_encode($url));
}
Crop:
Code (php)
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
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
// Create variables (in this scope) to hold the API and image size
var boundx,
boundy;
//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;
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
});
};
//updaten van de preview
function logoupdatePreview(c)
{
if (parseInt(c.w) > 0)
{
var rx = xsize / c.w;
var ry = ysize / c.h;
$logopimg.css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
console.log("x= " + xsize + ", y= " + ysize + ", rx= " + rx + ", ry= " + ry + ", bx=" + boundx + ", by=" + boundy);
}
}
De bounds in de console.log geven undefined aan.
Toevoeging op 11/06/2013 09:44:05:
Code (php)
1
console.log(jcrop_api2.getBounds());
Zo worden de bounds wel weergegeven.
Toevoeging op 11/06/2013 11:12:46:
Ben er maar omheen gaan werken.
Dit werkte:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function logoupdatePreview(c)
{
if (parseInt(c.w) > 0)
{
var rx = xsize / c.w;
var ry = ysize / c.h;
//deze regel
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'
});
}
}
{
if (parseInt(c.w) > 0)
{
var rx = xsize / c.w;
var ry = ysize / c.h;
//deze regel
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'
});
}
}
Gewijzigd op 11/06/2013 09:44:39 door Dennis Lommerde
Er zijn nog geen reacties op dit bericht.