Bilder nicht skalieren, aber einen kleinen Teil anzeigen

leon_20v

Erfahrenes Mitglied
Hallo,

ich muss mal wieder euer Wissen abfragen. :) Ich hoffe ich darf.

Also bei mir auf der Seite können User Bilder hochladen. Diese werden dann Automatisch auf 360px skaliert und die Höhe ist variabel.

So jetzt werden auf einer Seite User per PHP abgefragt und dann wird Automatisch das Bild in einer Tabelle angezeigt. Im mom ist das so, das alle Bilder dann auf eine Breite von 160 skaliert werden. Die Höhe ist auch wieder variabel.

Das gefällt mir aber so nicht. Also ich hätte gern, dass das Bild auf 160px Breite skaliert wird und dann einfach bei einer Höhe von z.B. 200px abgeschnitten wird. Wenn das Bild weniger als 200px Höhe hat, dann sollte es eben nur auf 160px Breite skaliert werden und die Höhe ist dann variabel bzw. weiß. perfekt wäre es dann noch, wenn es mittig(wenns zu kompliziert wird dann nicht) angezeigt wird.

Wie kann ich das realisieren?

Vielen Dank

Lg
Leon
 
Du könntest z.B. ein DIV-Element drum rum machen und diesem eine Höhe und die CSS-Eigenschaft "overflow" verpassen:

HTML:
<div style="height: 200px; overflow: hidden;">
  <img /> <!-- Dein Bild //-->
</div>
 
Zuletzt bearbeitet:
Hey Leon,

im Prinzip kannst dus in PHP genau so realisieren, wie dus beschrieben hast ;-) Alle Funktionen, die du brauchst, sind hier (http://php.net/manual/de/ref.image.php) und hier (http://www.selfphp.info/funktionsuebersicht/image_funktionen.php) erklärt. Es gibt jeweils auch ganz gute Beispiele dazu.

Das Skalieren ist kein Problem. Das kriegst du schnell raus. Um das Bild mittig zu platzieren musst n bissel mit der Größe von deinem ursprünglichen und dem Zielbild rumspielen und es dann über Pixelangaben platzieren. Das ist am Anfang n bissel knifflig, aber wenn dus mal raus hast, geht das auch gut.

Noch Fragen? ;-)

Viele Grüße,
Frezl

// EDIT: Sorry, das war wohl nicht deine Frage, wenn dus im HTML-Forum gepostet hast :-P Aber vll hilfts dir ja trotzdem weiter...
 
Außer dieser Möglichkeit gäbe es dann noch:

1. Das Bild als Hintergrund-Bild setzen (Meine lieblings-Methode).
HTML:
<div style="width:160px;height:160px;background:#fff url(bild.jpg) no-repeat center center;"></div>

2. Vielleicht kommst du auch mit clip ans Ziel: http://www.css4you.de/clip.html
 
danke an die mit html erstmal, ich wers glaub erst mal mit der Hintergrund Methode machen und dann mit PHP probieren.

Hier habe ich aber ein Problem:
Ich gebe den Bildern über CSS mit einem Link einen Rand. dieser wird dann natürlich unten abgeschnitten, das sieht dann sehr blöd aus.

an Fetzl:
Ähm bissi Bahnhof verstehe ich da schon. Kannst du mir evtl. helfen und mir aus Stegreif sagen, welche Funktionen ich benötige, beim Überfliegen würde ich sagen, ich brauch keine von denen xD
 
Zuletzt bearbeitet:
Hey Leon,

ich hab vor ner Weile mal ein Skript gebastelt, das Bilder skaliert und die Ecken abrundet. Habs damals ziemlich gut auskommentiert, weils für mich auch der erste Versuch mit den Grafik-Bibliotheken war ;-) Schaus dir mal durch, das könnte dir helfen!

PHP:
<?php

	/* -------------------------------------------------------------------------------------
		Kleine Übung um zu lernen, wie man in PHP Bilder erzeugt
	------------------------------------------------------------------------------------- */
	
	/* -------------------------------------------------------------------------------------
	  Funktionen:
		- Zu große Radien werden automatisch auf den maximal
		  möglichen Radius verkleinert.
		- Die Bildgröße wird unter Erhaltung des Seitenverhältnisses skaliert.
		  Das Bild wird dabei zentriert und ggf. beschnitten, sodass das Zielbild komplett
			ausgefüllt ist.
		- Wird ein Radius <= 0 angegeben, wird kein Radius erzeugt.
		- Als Quellfromate sind GIF, JPG und PNG möglich.
		- Zielformat ist PNG (wegen Transparenz)
	------------------------------------------------------------------------------------- */

/*
 * EINSTELLUNGEN
 */

	$src_image = "test_gerahmt.png";
	$dst_width = 200;			// 200
	$dst_height = 155;		// 155
	
	// Eckenradius:
	$radius = 5;
	
	// Overlay-Text:
	$box_height = 26;
	$box_color = array (255, 255, 255);
	$text = "Fotogalerie";
	$text_size = 13;
	$text_color = array (0, 0, 0);
	$ttf_file = "verdanab.ttf";
	
	
/*
 * BILD SKALIEREN UND ZUSCHNEIDEN
 */
	
	// Bildinformationen auslesen:
	/* array getimagesize ( string $filename [, array $imageinfo] )
			array[0] = Höhe
			array[1] = Breite
			array[2] = Bildtyp (1 = gif, 2 = jpg, 3 = png, 4 = swf)
			array[3] = HTML-Zeichenkette - "height=xx width=xx"
	*/
	$src_info = getImageSize ($src_image);
	$src_width = $src_info[0];
	$src_height = $src_info[1];
	$src_type = $src_info[2];
	
	// Tatsächliche Bildgröße ermitteln, um das Seitenverhältnis zu bewahren:
	/* Dabei wird die Größe so ermittelt, dass das Bild das ganze Format ausfüllt! */
	$src_aspect_ratio = $src_width / $src_height;
	$dst_aspect_ratio = $dst_width / $dst_height;
	
	if ($src_aspect_ratio < $dst_aspect_ratio) {
		/* Ziel hat ein breiteres Verhältnis als Quelle --> Breite anpassen */
		$res_width = $dst_width;
		$zoom_ratio = $dst_width / $src_width;
		$res_height = $src_height * $zoom_ratio;
	} else {
		/* Quelle hat ein breiteres Verhältnis als Ziel --> Höhe anpassen */
		$res_height = $dst_height;
		$zoom_ratio = $dst_height / $src_height;
		$res_width = $src_width * $zoom_ratio;
	}
	
	// Quellbild erzeugen:
	switch ($src_type) {
		case 1:	$src_img = imageCreateFromGIF ($src_image); break;
		case 2:	$src_img = imageCreateFromJPEG ($src_image); break;
		case 3:	$src_img = imageCreateFromPNG ($src_image); break;
		default: die ("Bild-Typ wird nicht unterstützt.");
	}
	
	// Zielbild erzeugen:
	$img = imageCreateTrueColor ($dst_width, $dst_height);
	
	// Bildgröße anpassen:
	$offset_x = -($res_width - $dst_width) / 2;
	$offset_y = -($res_height - $dst_height) / 2;
	imageCopyResampled ($img, $src_img, $offset_x, $offset_y, 0, 0, $res_width, $res_height, $src_width, $src_height);
	

/*
 * TEXT-OVERLAY EINFÜGEN
 */
 
	// Farben erzeugen:
	$box_col = imageColorAllocate ($img, $box_color[0], $box_color[1], $box_color[2]);
	$text_col = imageColorAllocate ($img, $text_color[0], $text_color[1], $text_color[2]);
 
  // Hintergrund einfügen:
	imageFilledRectangle ($img, 0, $dst_height - $box_height, $dst_width, $dst_height, $box_col);
	
	// Größe der Text-Box berechnen:
	/* array imagettfbbox  (  int $size  ,  int $angle  ,  string $fontfile  ,  string $text  )
			array[0] = untere linke Ecke, X-Position
			array[1] = untere linke Ecke, Y-Position
			array[2] = untere rechte Ecke, X-Position
			array[3] = untere rechte Ecke, Y-Position
			array[4] = obere rechte Ecke, X-Position
			array[5] = obere rechte Ecke, Y-Position
			array[6] = obere linke Ecke, X-Position
			array[7] = obere linke Ecke, Y-Position
	*/
	$text_info = imageTTFBBox ($text_size, 0, $ttf_file, $text);
	$text_width = $text_info[4] - $text_info[6];
	$text_height = $text_info[1] - $text_info[7];
	
	// DEBUG:
//	echo "height: ".$text_height."<br>";
//	echo "width : ".$text_width;
	
	// Text erzeugen:
	imageTTFText ($img, $text_size, 0, ($dst_width / 2) - ($text_width / 2), ($dst_height - $box_height / 2) + ($text_height / 3), $text_col, $ttf_file, $text);
	
	
/*
 * KANTEN ABRUNDEN
 */
 
	if ($radius > 0) {
	
		// Farbwert für die Ecken festlegen:
		/* Diese Farbe wird am Ende als transparent definiert, es muss sich also
			 um eine Farbe handeln, die im Bild nicht vorkommt! --> An dieser Stelle dynamisch ermitteln****** */
		$corner_color = array (0, 255, 0);
	
		// maximalen Radius festlegen:
		if ($dst_width > $dst_height) {
			$max_radius = $dst_height/2;
		} else {
			$max_radius = $dst_width/2;
		}
		if ($radius > $max_radius) {
			$radius = $max_radius;
		}
	
		// Farben erzeugen:
		$corner_col = imageColorAllocate ($img, $corner_color[0], $corner_color[1], $corner_color[2]);
	
		// Bögen erzeugen:
		/*	int imageArc ( resource $image, int $startpossition_x, int $startpossition_y, int $width, int $height, int $startangle, int $endangle, int $color ) */
		imageArc ($img, $radius-1, $radius-1, 2*$radius-1, 2*$radius, 180, 270, $corner_col);										// links oben
		imageArc ($img, $dst_width-$radius, $radius-1, 2*$radius, 2*$radius, 270, 360, $corner_col);						// rechts oben
		imageArc ($img, $dst_width-$radius, $dst_height-$radius, 2*$radius, 2*$radius, 360, 90, $corner_col);		// rechts unten
		imageArc ($img, $radius-1, $dst_height-$radius, 2*$radius-1, 2*$radius, 90, 180, $corner_col);					// links unten
		
		// Ecken füllen:
		imageFillToBorder ($img, 0, 0, $corner_col, $corner_col);												// links oben
		imageFillToBorder ($img, $dst_width, 0, $corner_col, $corner_col);							// rechts oben
		imageFillToBorder ($img, $dst_width, $dst_height, $corner_col, $corner_col);		// rechts unten
		imageFillToBorder ($img, 0, $dst_height, $corner_col, $corner_col);							// links unten
		
		// Eckenfarbe als transparent definieren:
		imageColorTransparent ($img, $corner_col);
	}
	
	
/*
 * BILD AUSGEBEN
 */
	
	// Header setzen:
	/* Wenn der Header erst hier gesetzt wird, werden evtl. Fehlermeldungen vorher noch ausgegeben */
	header ("Content-Type: image/png");
	
	// Bild-Typ festlegen (damit wird es angezeigt):
	imagePNG ($img);
	
	// Bild zerstören:
	imageDestroy ($img);	

?>

Anmerkung:
src steht für das Quell-Bild, dst für das Ziel-Bild.

Grüße,
Frezl
 
Zuletzt bearbeitet:
danke für den code, aber irgendwie ist das schon alles ziemlich kompliziert :(

quellbild, zielbield. das quellbild gebe ich doch vor?
 
Ja, das wäre in deinem Fall das hochgeladene Bild. Bei mir liegts im gleichen Ordner wie das Skript. Du musst den Pfad halt entsprechend anpassen. Hast du das mit dem Upload schon gelöst?

Grüße,
Frezl
 
// Edit Ich bearbeite den ganzen Beitrag, da ich ein ganze Stück weiter gekommen bin, doch es Funktioniert noch nicht ganz!

HTML:
 <table border="2" align="center" cellpadding="5" cellspacing="5">
      <form action="up.php" method="post" enctype="multipart/form-data" name="form" id="form" onsubmit="return validate_form ( );">
         <tr>
           <td colspan="2"><img src="memberFiles/<?php echo "$id"; ?>/pic1.jpg" alt="Ad" width="150" /></td>
         </tr>
		 <tr>
           <td colspan="2"><input name="datei[]" type="file" /></td>
         </tr>
         <tr>
           <td colspan="2"><input name="datei[]" type="file" /></td>
         </tr>
         <tr>
           <td colspan="2"><input name="datei[]" type="file" /></td>
         </tr>
         <tr>
           <td colspan="2"><div align="center">
             <input type="submit" name="Submit" value="Upload Image" />
           </div></td>
         </tr>
       </form>
</table>
Damit lass ich die Daten eingeben!

PHP:
<?php
session_start();
  
  $id = $_SESSION['id'];
  
  
  for ($i=0; $i<3; $i++) { 
	  if ( $_FILES['datei']['tmp_name'][$i] != "") {
	  $dateityp = GetImageSize($_FILES['datei']['tmp_name'][$i]);
	  if($dateityp[2] == 2)
	 {
  
		  if($_FILES['datei']['size'][$i] <  250000)
		   {
		   move_uploaded_file($_FILES['datei']['tmp_name'][$i], "memberFiles/$id/pic".($i+1).".jpg");
		   echo "Das Bild wurde Erfolgreich hochgeladen";
			}
  
		   else
		   {
			   echo "Das Bild darf nicht größer als 250 kb sein ";
			}
  
	   }
  
	  else
		  {
		 echo "Bitte nur Bilder im jpg Format hochladen";
	   }
  }
  }
  
  ?>

Das ist der Code. Allerdings wird immer nur das pic1.jpg gespeichert. Ich brauch aber pic2.jpg und pic3.jpg auch noch. Dazu kommt die hochgeladenen Dateien haben keine Rechte. Wie mach ich, dass die wenigsten das Recht haben, angeschauen zu werden?
 
Zuletzt bearbeitet:
Ich kenn mich zwar mit Datei-Uploads nicht aus, aber ich kann dir zwei allgemeine Tipps zur Fehlersuche geben:

Hast mal versucht, die Names von den Input-Feldern nicht als Array, sondern wirklich als einzelne Namen zu vergeben? Das könnte eine mögliche Ursache sein.

Und hast dir mal den Inhalt von $_FILES ausgeben lassen? Vielleicht sind die Daten darin in ner anderen Struktur gespeichert, als du sie auslesen willst.

Viele Grüße,
Frezl
 
Zurück