[Suche] Anzeige von Bildausschnitt

[Chriz]

Nabend!

Ich bin auf der Suche nach einem Script, mit dem ich einen zufälligen Ausschnitt eines Bildes anzeigen lassen kann.

Bspw. Ein Bild, welches die Maße 450x300 hat. Aus dem Bild sollte zufällig ein Bereich von 60x90 angezeigt werden.

Hat da jemand schon mal was gefunden, gesehen oder weiß, wie man das macht?

Meine Kenntnisse in JS reichen für sowas noch lange nicht aus

Gruß,

Chriz!

P.S.: Danke schonmal für eventuelle Antworten und Hilfen!

 

[kasimir83]

Tja, lass mal brainstorming:

Zunächst solltest du das Bild tatsächlich in die richtigen Häppchen slicen. Dann die Häppchen in ein Array packen und per Zufallszahl den Inhalt eines Arrayfeldes ausgeben.

Das Slicen schaffst du, die Arrayzuweisung:

var bildersch = new Array();
  bildersch[0] = "haeppchen0.jpg";
  bildersch[1] = "haeppcehn1.jpg";
  ...
  bildersch[n] = "haeppchenn.jpg";

Dann die Zufallszahl, ist wahrscheinlich nicht die optimale Funktion, sollte aber funktionieren:

  var z = round(Math.random() * (bildersch.length-1));

Für die Ausgabe brauchst du einen Platz wo das Bild hinsoll. Ich nehme mal eine Tabellenzelle.:

<td id="project" width="60" height="90"> </td>

Und die Ausgabe:

  document.getElementsById("project").innerHTML = "<img src=\""+bildersch[z]+"\" width=\"60\" height=\"90\">";

Viel Spaß beim zusammenklamüsern.

 

[CeeDee]

OK, kasimir83, das ist der Weg, den ich leider nicht gehen kann. Da die Seite von jemand anderem betreut wird (und derjenige das mit den Häppchen wohl nicht verstehen wird), müßte der Ausschnitt aus einem kompletten Bild "herausgeschnitten" werden.

Chriz!

 

[kasimir83]

Du könntest eine Tabellenzelle mit 60 x 90 erstellen, als Hintergrund die Grafik setzen und sie dann so verschieben, dass der richtige Ausschnitt gezeigt wird.

 

[womstar]

eine lösung ...

wobei ich ja ehr für php bin

<html>
<head>
<meta name="generator" content="notepad">
<script>

random_image_clip = function() {

	ausschnitt_breite	= 50;
	ausschnitt_hoehe	= 100;


	imgs			= [];

	img_width 		= [];
	img_height 		= [];


	for(x=0;x<arguments.length;x++) {

		imgs[x] 	= new Image();
		imgs[x].src 	= arguments[x];
		img_width[x]	= imgs[x].width;
		img_height[x]	= imgs[x].height;
	}


	zufallszahl 	= Math.floor(Math.random()*imgs.length);


	bild_w 		= img_width[zufallszahl]/ausschnitt_breite;
	bild_h 		= img_height[zufallszahl]/ausschnitt_hoehe;

	left_pos	= -ausschnitt_breite*Math.floor(Math.random()*bild_w);
	top_pos	= -ausschnitt_hoehe*Math.floor(Math.random()*bild_h);


	check_size = function(pos, cut, imgsize) {

		if((pos-cut)<-imgsize) {

			pos = pos+(pos+imgsize);
			if((pos-cut)<-imgsize)
			pos = pos+(pos+imgsize);

			return pos;
		}
		return false;
	};

	left_res 	= check_size(left_pos, ausschnitt_breite, img_width[zufallszahl]);
	top_res 	= check_size(top_pos, ausschnitt_hoehe, img_height[zufallszahl]);


	left_pos 	= (left_res!=false) ? left_res : left_pos;
	top_pos 	= (top_res!=false)  ? top_res  : top_pos;


	return	"<div style=\"overflow:hidden;font:1px;border:1px solid #000000;width:"+ausschnitt_breite+";height:"+ausschnitt_hoehe+"\">"+
		"<div style=\"position:absolute;top:"+top_pos+";left:"+left_pos+";width:"+img_width[zufallszahl]+
		";height:"+img_height[zufallszahl]+"\">"+
		"<img src=\""+imgs[zufallszahl].src+"\">"+
		"</div>"+
		"</div>";

};



</script>
</head>

<body>
<table>
<td width=300> </td>
<td><script>document.onload = document.write(random_image_clip([COLOR=red]'bild4.jpg','bild1.jpg','bild2.jpg'[/COLOR]));</script></td>
</table>
</body>
</html>

 

[Chriz]

Junge, junge, womstar!! Das ist der Hit in Dosen!!!

Vielen Dank, für dieses geniale Script!

Chriz!

 

[Chriz]

Kurze Anfrage

@womstar:

irgendwie scheint sich das script nur in bestimmten Bereichen "festzukrallen" Siehst Du dafür einen Grund?

Ich habe es mit einem Bild 640x480 ausprobiert, aber die Ausschnitte sind immer aus der rechten oberen Ecke.

Wäre klasse, wenn Du da was finden würdest!

Chriz!

 

[womstar]

post doch mal nen link zu der seite wo du dies eingebaut hast.