Bildausschnitt aus einem großen Bild

[Auf der Mauer]

Guten Abend,

ich habe eine Funktion (Javascript) gefunden, mit der man einen Bildausschnitt aus einem großen Bild machen kann. Ich würde dies gerne nutzen um ein quadratisches Vorschaubild zu erstellen. Kann mir bitte jemand bei der Einrichtung helfen?

Das Script stammt von dieser Webseite:
http://odyniec.net/projects/imgareaselect/


Das ist mein bisheriger Code:


<p style='font-size:10px;font-family:verdana'><b>DIE 3 ZULETZT HOCHGELADENEN BILDER</b></p>

<table>
<table align ="left" width="50% bgcolor="#DFDFDF" bordercolor="#DFDFDF" style="font-family:Verdana, Arial, serif; font-size:10px">

<?php

mysql_connect("localhost",
"Name","Passwort") or die
("Keine Verbindung moeglich");
mysql_select_db("Datenbank") or die
("Die Datenbank existiert nicht");

$abfrage = "SELECT * FROM Tabelle ORDER BY Erstellt DESC LIMIT 3";
$ergebnis = mysql_query($abfrage);
while($row = mysql_fetch_object($ergebnis))
{

echo "<td><a href='$row->Bilderlink' target='pic_haupt'><img src='$row->Thumb' width=58 height=57 border=0 ><br><br><img src=' enlarge.gif' border='0'></a><br></td>";
}
mysql_free_result($ergebnis);
?>
</table>

<?php

//Ermittlung der nächsten ID und des neuen Dateinamens

$abfrage = "SELECT * FROM Tabelle ORDER BY ID DESC LIMIT 1";
$ergebnis = mysql_query($abfrage);
while($row = mysql_fetch_object($ergebnis))

$NeueID = $row->ID+1;
$NeuerDateiName = "Bild$NeueID.jpg";

//Ausgabe der Ergebnisse zur Überprüfung

echo "<br><br><br><br><br><p style='font-size:10px;font-family:verdana'><b>Die nächste ID lautet: </b>[$NeueID]";
echo "<br><b>Der neue Dateiname ist:</b> $NeuerDateiName </p>";

//Speicherort für hochgeladenes Bild finden (Kann wenn der richtige Pfad gefunden wurde gelöscht werden!)

$Speicherort = dirname($_SERVER['SCRIPT_FILENAME']) . '/Bilder/';

echo "<p style='font-size:10px;font-family:verdana'><br><b>DER SPEICHERPFAD:</b><br> $Speicherort</p>";

if (isset($_POST['upload']))
{
if ($_FILES['userfile']['size'] > 0)
{
echo '<br /><p style=\"color:#000000;font-size:10px;font-family:verdana;\"><b>Informationen zur aktuellen Datei:</b><br><br>';
echo "<b>Dateiname: </b>". $_FILES['userfile']['name'] . '<br>';
echo "<b>Dateigröße: </b>". $_FILES['userfile']['size'] . ' Byte<br>';
echo "<b>Dateityp: </b>". $_FILES['userfile']['type'] . '<br></p>';

move_uploaded_file($_FILES['userfile']['tmp_name'],
"$Speicherort{$_FILES['userfile']['name']}");

echo "<p style='color:#669966;font-size:11px;font-family:verdana'><img src='abgehakt.jpg' width=10 height=9 border=0 > <b>File erfolgreich hochgeladen!</b></p>";

} else {
echo "<p style='color:#FF6666;font-size:11px;font-family:verdana'><b>Keine Datei hochgeladen</b></p>";
}
}

?>
<form method="post" enctype="multipart/form-data" action="<?=$_SERVER['PHP_SELF']?>">
<p style='font-size:10px;font-family:verdana'><br><b>Ihre Dateiauswahl:</b></p><input type="file" name="userfile">
<input type="submit" name="upload" value="Hochladen">
</form>


Hierbei kann ein Bild in einen beliebigen Ordner hochgeladen werden. Nach dem hochladen werden Informationen zu dem Bild angezeigt und eine Erfolgsmeldung ausgegeben. Hier an dieser Stelle würde sich nun die Funktion der Thumbnailerstellung gut machen. Das Originalbild ist ja bereits auf dem Server.

Ich habe folgende Zeile in den Bereich eingefügt.
und die angegebene Javascript Datei in das Rootverzeichnis gepackt.


<script type="text/javascript" src="jquery.imgareaselect-0.8.js"></script>


So steht es ja auch auf der Webseite. Jetzt weiß ich aber nicht genau was ich mit folgendem Code machen soll bzw. wo genau der jetzt wie eingebaut wird. Das example img sollte ja wahrscheinlich mit einer Bildvariable gefüllt werden damit dort immer das hochgeladene Bild angezeigt wird.


<script type="text/javascript"> $(window).load(function () { $('img#example').imgAreaSelect({ handles: true, onSelectEnd: someFunction }); }); </script>


Ich bin für jeden Tip dankbar.

Gruß
René

[Indyk]

Hallo Rene,

eine frage voraus, das einzubindende Javascript scheint mir das Framework JQeuery (http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery)zu benutzen, hast du das bereits eingebunden?

[Auf der Mauer]

Hallo Indyk,

vielen Dank für die Antwort.
Also auf der angegbenen Webseite war ein Zip Datei zum Download angeboten. Da drin waren 2 files.

1. jquery.imgareaselect-0.8.js
2. jquery.imgareaselect-0.8.min.js

Ich habe beide Dateien via FTP in das Rootverzeichnis (/) gepackt.

Diesen Code habe ich in den Bereich der HTML Seite Kopiert.


<script type="text/javascript" src="jquery.imgareaselect-0.8.js"></script>


Da wird ja anscheinend die Javascriptdatei aufgerufen.

Ist es das was du meinst?

Gruß
René

[Indyk]

Hallo René,

ja das beantwortet meine Frage, versuche img#example durch die ID deines bildes zu ersetzen:

<img id="testbild" src="bild.png" />


<script type="text/javascript"> $(window).load(function () { $('img#testbild').imgAreaSelect({ handles: true, onSelectEnd: someFunction }); }); </script>

oder auch nur:
<script type="text/javascript"> $(window).load(function () { $('#testbild').imgAreaSelect({ handles: true, onSelectEnd: someFunction }); }); </script>

musst mal ausprobieren ob eines / beides geht.

Ich hoffe das beantwortet deine Frage

[Auf der Mauer]

Hallo Indyk,

danke für die Antwort!
Verstehe ich es richtig, das jedes Bild eine ID zugewiesen werden muss?

Bezogen auf mein obiges Script (Uploadscript) wäre es nicht möglich die Bildvariabel einzusetzen?

so vielleicht?

<script type="text/javascript"> $(window).load(function () { $('$_FILES['userfile']['name']').imgAreaSelect({ handles: true, onSelectEnd: someFunction }); }); </script>


Ich habe ja noch keine Funktion integriert welche die hochgeladenen Bilder umbenennt.
Aber wäre folgendes möglich?


$NeueID = $row->ID+1; // Egebnis z.B. (6)
$NeuerDateiName = "Bild$NeueID.jpg"; // Ergebnis Bspw. Bild6.jpg


und das dann hier einsetzen.


<img id="$NeueID" src="$NeuerDateiName" /> // 6 und bild6.jpg, 7 und bild7.jpg usw.


Irgendwie fehlt mir die Idee, wie ich das in mein Script einbauen kann.
Nach dem Upload befindet sich das hochgeladene Bild im Ordner /Bilder. (Noch mit dem original Dateinamen.) In welcher Variabel ist denn jetzt genau das Bild gespeichert?


1. $_POST['upload']

oder

2.$_FILES['userfile']['name']

oder

3.$_FILES['userfile']['tmp_name'] // << Ich denke das ist nur temporär angelegt.


Jedesmal wenn ich versuche die Funktion rename zu integrieren kommen Fehlermeldungen. Anstelle des ['name'] einfach meine Variable ['$NeuerDateiName'] funktioniert nicht.

Gruß
René

[Auf der Mauer]

Ich habe es jetzt hinbekommen, hinterher ist man immer schlauer. ;-)
Also die JQeuery ist eben in diesem ZIP nicht enthalten. Es handelt sich dabei nur um ein Plugin.
Nachdem ich mir JQeuery heruntergeladen und in das Rootverzeichnis kopiert habe und es ebenfalls wie auch das Plugin in den Head Bereich eingebunden habe funktioniert es bestens.


<script type="text/javascript" src="jquery-1.3.2.min.js"></script>


Danke nochmal für die Hilfe!

Gruß
René