2010-04-29 6 views
16

Gibt es einige Client-Komponenten (jquery/swf), die die Möglichkeit geben hochladen und zuschneiden (Benutzer sollte in der Lage sein, den Bereich zu beschneiden) ein Bild in der Browser und dann das zugeschnittene Bild an den Server senden?hochladen und Bild zuschneiden, bevor es an den Server gesendet wird

Ich bin auf asp.net-mvc (nicht sicher, ob es darauf ankommt)

Antwort

18

jcrop

Jcrop ist die schnelle und einfache Möglichkeit, Bild beschneiden Funktionalität, um Ihre Web-Anwendung hinzuzufügen. Es kombiniert die Benutzerfreundlichkeit eines typischen jQuery-Plugins mit einer leistungsfähigen plattformübergreifenden DHTML-Cropping-Engine, die vertrauten Desktop-Grafikanwendungen treu bleibt.

+3

Ich würde das zweite. Siehe http://towardsnext.wordpress.com/2009/04/13/crop-image-in-aspnet-using-jcrop-jquery/ für ein Tutorial, das es in MVC verwendet. –

+5

Ja jcrop ist gut zum Zuschneiden, aber Sie müssen das gesamte Bild hochladen, bevor Sie es zuschneiden, würde ich gerne wissen, ob es etwas gibt, das das Bild auf dem Client zuschneiden wird, bevor es an den Server – Omu

+0

Zuschneiden Clientseite würde einige benötigen Art von Plugin, wie Flash oder Silverlight (Sie können es nicht über JavaScript). –

9

Das Jcrop Image Plugin kann die Benutzeroberfläche zum Zuschneiden anzeigen und die zugeschnittenen Koordinaten im Browser abrufen. Allerdings ist es nicht Ernte das Bild. Daher wird der Beschneidungsprozess auf dem Server durchgeführt, was ziemlich schlecht für die Serverleistung ist.

Die Antwort here führt eine Jcrop Erweiterung, die das Bild im Browser beschneidet und Uploads die Bild an den Server abgeschnitten. "Es verwendet das Jcrop-Plugin zum Zuschneiden von Bildern, zum Zeichnen des zugeschnittenen Bereichs im HTML 5-Canvas-Element, zum Konvertieren der Leinwand in einen Blob und zum Hochladen der Bilddatei auf den Server von AJAX".

Der wichtigste Teil ist die canvasToBlob-Funktion, die das HTML 5-Canvas-Element in einen Blob-Typ konvertiert, der als Bilder auf den Server hochgeladen werden kann. Leider funktioniert diese Methode nur in AJAX und kann kein Formular direkt senden, da das Blob nicht als Standarddatei in das HTML-Formularelement eingegeben werden kann. In Wirklichkeit verwenden wir Formulare selten, um Bilder direkt beim Zuschneiden einzureichen.

+0

Gute Job-Punkt auf die richtige Antwort, aber nur ohne Ihren Beitrag verlinken ist keine Antwort besser aktualisieren Sie Ihre Antwort, um Details hinzuzufügen, oder fügen Sie dies als Kommentar zu Frage und löschen Sie diese Antwort – Ram

4

Sie müssen eine zuschneidende Benutzeroberfläche mit einem Uploader kombinieren, um diese komplexe Aufgabe abzuschließen. Die Zuschnitt-Benutzeroberfläche ist für die Anzeige der Zuschnitt-Benutzeroberfläche und die Angabe der Beschnittkoordinaten zuständig, und der Uploader-Crop & ändert die Größe des Bilds, konvertiert es in einen Blob und lädt es auf einen Server hoch.

Die Benutzeroberfläche zum Zuschneiden ist üblich, aber der Uploader ist schwer zu finden. Ich empfehle die cropping UI ImgAreaSelect, die einfach zu bedienen ist und diese Uploader, die einfach und erweiterbar ist, aber es ist nicht kostenlos.

Verwandte Themen