JCrop heeft de bounds (hoogte en breedte) nodig van de afbeelding om de selectie te schalen.
Deze blijven helaas undefined. Heeft iemand een idee waardoor dit komt? Code staat hieronder:


functie getBounds

      getBounds: function () {
        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.

	$('.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);
	});


AJAX bij het bovenstaande stuk:

		//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));
		}


Crop:
	
	// 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.

[size=xsmall]Toevoeging op 11/06/2013 09:44:05:[/size]

console.log(jcrop_api2.getBounds());

Zo worden de bounds wel weergegeven.

[size=xsmall]Toevoeging op 11/06/2013 11:12:46:[/size]

Ben er maar omheen gaan werken.
Dit werkte:


	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'
			});
		}
	}

Reageren