Wie schneiden ausgewählten Bereich eines Bildes und speichern Sie es auf dem server?
Lassen Sie mich zusammenfassen, das Szenario mit einem Bild:
Ich versuche, eine Funktion für die Einstellung Profil Bilder in meine Website.Ich möchte eine Seite haben, zeigen Sie das hochgeladene Bild in seiner ursprünglichen Größe in einem Bild-Feld, aber die Größe des Profil Bild sollte 200*153 so ich will, dass die Benutzer können die Größe der picure und auch ziehen Sie einen frame(die frame-Größe ist 200*153) in einem Bereich von der Größe veränderte Bild, dass Sie möchten, werden Ihre Profil-Bild und beim klicken auf die Schaltfläche speichern, nur der Bereich, in dem Rahmen werden croped und speichern Sie diesen Bereich auf dem server.
Mir vorstellen, dass diese sind die HTML-codes:
<div style="height:150px;width:200px;position:absolute;border:5px solid yellow;z-index:1001;" id="test1"></div>
<img id="test" src="~/Content/01052013626.jpg"/>Beachten Sie, dass das div-Element ziehbar und das Bild ist in der Größe anpassbar.
Danke.
- stackoverflow.com/questions/6887183/...
- Iwant, um einen snapshot von der hinter-Bild, das in der Grenze des div und speichern Sie es auf computer.
- Warum machen Sie das nicht auf der server-Seite?
- dies ist wahrscheinlich für ein Profil Kopfschuss einiger Sortieren. Einige Gastgeber haben keine imagemagick oder etwas vergleichbares installiert werden, so dass die HTML5-Lösungen vorgezogen werden.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Würden Sie beginnen, durch die Positionierung im Bild und die div in der gleichen wrapper-div. Ich würde dies tun, weil es Ihnen erlaubt, zu verwenden die jquery-Koordinate Funktionen auf div-leichter, eher als das Bild.
Einmal haben Sie die Koordinaten, können Sie einen Ausschnitt des Bildes angegeben, die durch die div Abmessungen und Koordinaten und verwenden Sie dieses tutorial:
http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/
Zu retten, Abschnitt auf einem HTML-canvas-element. Das canvas-element kann unsichtbar sein, wenn Sie mögen.
Einmal gespeichert ist, führen Sie folgende Antwort:
So speichern Sie ein HTML5-Canvas als Bild auf einem server
speichern es auf den server.
Ok, Zuerst müssen Sie die Verwendung von server-side-Sprache, um tatsächlich speichern Sie das zugeschnittene Bild. Ich würde Jcrop für das zuschneiden, und dann schicken Sie es an den server für das speichern Prozess.
Wieder, KÖNNEN Sie NICHT speichern Sie die Dateien auf dem server mit javascript nur!
Ich glaube, das ist fast genau das, was du suchst:
jCrop-jQuery
Nur, statt zu sparen die Datei, Ausgabe auf den Bildschirm mit einer 'Zwangs-download' - header
Können Sie diese php-Klasse zum maskieren eines Bildes mit einem maskingimage der Größe 200*153. Es wird genau zuschneiden, den genauen Bereich, die Verwendung von pixel-basierten alpa-Kanal-mapping. Überall dort, wo das Bild mit der Maske hat den alpha-Kanal 0( Transparent Teil ), wird es beschneiden, indem Sie die Pixel des Bereichs und regeneriert das Bild, um die gewünschte neue Größe in Ihrem Fall. Sie müssen halten Sie ein Bild mit der Maske der Größe 200*153 pixel auf Ihrem server verwendet werden. Hier können Sie sich auch an die neue Größe angepasst-Koordinaten durch ajax-Aufrufe an backend und beschneiden Sie ein Bild entsprechend.
https://github.com/lukeissac/Image-Masking-in-php/blob/master/class_lib.php
Wenn Sie haben die Möglichkeit, zu gehen mit server-side script, es wird funktionieren. Der link oben ist ein proof-of-concept für die gleichen.