Problem mit dem Bild Croper

kirka

Mitglied
Hallo, kann mir bitte jemand helfen, ich habe nicht viel ahnung von Ajax. Also habe im Internet Tutorials gefunden wie man das alles machen muss, aber habe jetzt folgendes Problem, also wenn ich z.B. Bilder mit der Breite bis 1024 hochladen möchte, dann schneidet bei mir alles so wie es soll, aber wenn ich versuche Bilder mit der Breite über 1024 z.B. 3264 x 2448 hoch zuladen dann geht bei mir wieder gar nicht der Schneider wird sehr klein und alles passt dann wieder nicht , die Bilder müssen auf 300 x 400 geschnitten werden.

man muss das irgendwie mit if machen, wenn die Breite höher als 1024 ist, dann die Schnittfläche erweitern

Hier habe ich den Schneider für normale Breite die bis 1024 geht festgesetzt


var sizew = 515;
var sizeh = 692;


hier ist ein Screen. alles ist super so wie ich es möchte

1294630996-clip-48kb.jpg


Und hier ist z.B. für die Breite 3264 x 2448

und so sieht es aus, wenn das Bild breiter als 1024 ist, in dem Fall habe ich die Breite 3264 x 2448

1294631092-clip-67kb.jpg


hier muss ich die Schnittfläche auf das


//var sizew = 1635;
//var sizeh = 2192;


erweitern

also es muss dann so gehen

PHP:
if ($bild_grosse > 1024 ) {

var sizew = 1635;
var sizeh = 2192;

} else {

var sizew = 515;  
var sizeh = 692;

}

order liege ich hier falsch ? wenn nicht, dann wie bekomme ich die größe des Bildes zum Vergleich ****?

hier ist der komplette ajax code


Code:
	var fixed = 1; // vorschau an/aus
	
	// croper
	
	var sizew = 515;  
	var sizeh = 692;

	//var sizew = 1635;
	//var sizeh = 2192; 
	
	// vorschau fenster
	
	var bildw = 300;
	var bildh = 400;

function ajaxFileUpload()
	{
		$("#loading").ajaxStart(function(){
			$(this).show();
		}).ajaxComplete(function(){
			$(this).hide();
		});

		$.ajaxFileUpload
		(
			{
				url:'functions.php?action=upload',
				secureuri:false,
				fileElementId:'file',
				dataType: 'json',
				success: function (data, status)
				{
					if(typeof(data.error) != 'undefined') {
						if(data.error != '')
							alert(data.error);
					} else {
							$("#fname").val(data.msg); //get filename from the response
							$("#image").append($(document.createElement("img")).attr({src: "/uploads/vorlage/"+data.msg,id:"jcrop"})).show(); // create image and append the html inside <div id=#image>
							//if crop gives fixed width then preview will be shown
							if(fixed)
								$("#crop_preview").css({width:bildw,height:bildh,margin:"0 auto"}).append($(document.createElement("img")).attr({src: "/uploads/vorlage/"+data.msg,id:"preview"})).show();//create image and prepend  the html inside <div id=#image>
							jCrop('#jcrop'); //initialize jCrop for the image
							//eye candy stuff :)
							$("#upload").slideUp();
					}
				}
			}
		)
		return false;
	}

    // function jCrop(f)
	
	function jCrop(f) {
				$(f).Jcrop({
					onChange: updateCoords,
                    onSelect: updateCoords,
					//aspectRatio: bildw / bildh,
					allowSelect: false,
					allowResize: false,
					setSelect: [ 0, 0, sizew, sizeh ],
					boxWidth: 600, // Bild Fenster
				});
	}

	
	function updateCoords(c)
	{
					$('#x').val(c.x);
					$('#y').val(c.y);
					$('#w').val(c.w);
					$('#h').val(c.h);
					
                    //if crop gives fixed size, preview will be shown
					
                    if(fixed) {
                    var rx = bildw / sizew;
                    var ry = bildh / sizeh;
										
					//alert(data.msg);
                    // Live Preview
					
                    $('#preview').css({
                        width: Math.round(rx * $("#jcrop").width()) + 'px',
                        height: Math.round(ry * $("#jcrop").height()) + 'px',
                        marginLeft: '-' + Math.round(rx * c.x) + 'px',
                        marginTop: '-' + Math.round(ry * c.y) + 'px'
                    });
                }

	}
	
    function timedRefresh(timeoutPeriod) {
	setTimeout("location.reload(true);",timeoutPeriod);
}

    /*
     * function crop()
     * ajax function which returns the cropped image
     */   
      
	function crop() {
		$.ajax({
			   type: "POST",
			   url:"functions.php?action=crop",
			   data: {x: $('#x').val(),y: $('#y').val(),w: $('#w').val(),h: $('#h').val(),fname:$('#fname').val(),bildw:bildh,sizew:sizeh},
			   success: function(msg){
				   if(!fixed)  
				   $("#crop_preview").css({overflow:"auto"})
                   $("#crop_preview").after("<br /><center>Text<br /><br />").show();
                   $("#image").slideUp();
			   }
			 });
	}
 
Zurück