[JS] Ausschnitt aus Bild speichern

Guten Tag,

Auf eine Empfehlung von einem Bekannten habe ich mich hier angemeldet und ich habe ein Problem mit Javascript und weis nicht, wie ich das Problem lösen kann und brauche eure Hilfe.

Folgendes möchte ich realisieren:

Es wird ein Bild im Browser angezeigt. Wenn man mit der Maus über das Bild fährt erscheint um den Mauszeiger ein Kasten. Wenn man nun auf auf einen Bereich des Bildes klickt, wird dieser Teil (innerhalb des Kastens) aus dem Bild "ausgeschnitten" und auf dem Server abgespeichert.

Ich habe das ganze mal mit ein paar Bildern versucht verständlich zu machen:

I. Das Grundbild, so wird es im Browser angezeigt.
[Blockierte Grafik: http://img15.myimg.de/grund92a86.jpg]

II. Wenn man mit der Maus über einen Bereich des Bildes fährt dann wird um diesen Bereich der Kasten gelegt sodass man sieht, wie der Ausschnitt hinterher aussehen wird.
[Blockierte Grafik: http://img15.myimg.de/kastenf4edf.png]

III. Man klickt nun auf das Bild und der Ausschnitt den man vorher ausgewählt hat wird aus dem Bild ausgeschnitten und z.B. als: ausschnitt1.png auf dem Server abgespeichert.
[Blockierte Grafik: http://img15.myimg.de/ergebnisf4a4b.png]

Ich hoffe das Problem ist verständlich und lösbar, per Google habe ich leider nichts brauchbares gefunden, unter Anderem weil ich nicht genau weis, welche Suchbegriffe ich wählen sollte.

Habe noch ein paar Fragen bezüglich mit PHP und den Pixelangaben den Ausschnitt berechnen und speichern. Könntest du mir vll. sagen wie diese Funktion heißt womit man den Ausschnitt berechnet bzw. wie man danach bei Google suchen könnte? Könntet ihr mir vielleicht ein paar Tips geben? Würde mich sehr gerne einlesen und bin dankbar für Tips und die Vorgehensweise.

So,

Ich bin es nochmal. Ich habe es jetzt soweit geschafft, dass man eine Box hat, aus der man den Hintergrund wählen kann, eine DIV Box verfolgt die Maus und wenn man draufklickt sendet das Script die Koordinaten (obere linke Ecke).

Das PHP Script sieht so aus:

<?php
$urs = $_GET['u'];
$x = $_GET['x'];
$y = $_GET['y'];


if (eregi('.jpg', $urs)) {
$imagequelle = @imagecreatefromjpeg($urs);
}
if (eregi('.png', $urs)) {
$imagequelle = @imagecreatefrompng($urs);
}
if (eregi('.gif', $urs)) {
$imagequelle = @imagecreatefromgif($urs);
}
$image = @imagecreate(75, 75);


imagecopy($image, $imagequelle, 0, 0, $x, $y, 75, 75);
imagedestroy($imagequelle);


header('Content-type: image/png');
imagepng($image);


?>

(Keine Sorge bezüglich der Sicherheit, das wird noch verändert)
So, jetzt gibt er mir auch den gewünschten Bildinhalt aus, jedoch ist die Qualität des Endbildes ziemlich schlecht.
Hier mal ein Beispiel:

Original:
[Blockierte Grafik: http://www.secondpicture.com/tutorials/digital_image_processing/light_and_glow_effects_in_photoshop.jpg]

Ausschnitt:
[Blockierte Grafik: http://img15.myimg.de/ausschnitt7d9d6.png]

Wie man sieht ist die Qualität des Bildes stark gesunken, sodass es kaum noch erkennbar ist. Ist es möglich die Qualität des Ausschnittes zu verbessern?

Vielen Dank - wäre die Qualität noch ebsser hätte ich das Script fertig

Ich wusste bis heute selber nicht das ich überhaupt irgendwie mit Javascript umgehen kann.

Das schwierige war eigentlich hinter die Logik dahinter zu kommen und dank deiner Hilfe habe ich es geschafft! Vielen Dank