Wie schneidet man einen ausgewählten Bereich eines Bildes ab und speichert es auf dem Server?
Lassen Sie mich das Szenario mit einem Bild zusammenfassen:
Ich versuche, eine Funktion zum Einstellen von Profilbildern in meiner Site zu machen. Ich möchte eine Seite haben, um das hochgeladene Bild in seiner Originalgröße in einem Bildfeld anzuzeigen, aber die Größe des Profilbildes sollte 200 * 153 sein Ich möchte, dass die Benutzer die Größe des Bildes ändern und auch einen Rahmen (die Rahmengröße ist 200 * 153) in einen beliebigen Bereich des skalierten Bildes ziehen können, dass sie ihr Profilbild sein wollen und wenn sie auf die Schaltfläche "Speichern" nur den Bereich klicken ist in dem Frame becoped und speichert diesen Bereich auf dem Server.
Stellen Sie sich vor, dass dies die HTML-Codes sind:
%Vor%Beachten Sie, dass das Div ziehbar ist und das Bild in der Größe veränderbar ist.
Danke.
4 Antworten
Sie würden damit beginnen, das Bild und das div in demselben Wrapperdiv zu positionieren. Ich würde dies tun, weil es Ihnen erlauben wird, jQuery Koordinatenfunktionen auf der div einfacher als das Bild zu verwenden.
Sobald Sie diese Koordinaten haben, können Sie einen Ausschnitt des Bildes, der durch die Dimensionen und Koordinaten des DIV spezifiziert wurde, machen und dieses Tutorial benutzen:
Um diesen Abschnitt auf einem HTML-Canvas-Element zu speichern. Das Canvas-Element kann unsichtbar sein, wenn Sie möchten.
Sobald das gespeichert ist, folgen Sie dieser Antwort:
So speichern Sie ein HTML5-Canvas als Bild auf einem Server
um es auf dem Server zu speichern.
Ok, zuerst müssen Sie die serverseitige Sprache verwenden, um das zugeschnittene Bild zu speichern. Ich würde Jcrop für das Zuschneiden verwenden und es dann zum Speichern an den Server senden. p>
Auch hier können Sie KEINE Dateien auf dem Server mit nur Javascript speichern!
Ich glaube, das ist fast genau das, wonach Sie suchen: jQuery jCrop
Nur, anstatt die Datei zu speichern, geben Sie sie auf dem Bildschirm mit einem Header 'erzwungenes Herunterladen' aus
Sie können diese php-Klasse verwenden, um ein Bild mit einem Maskierungsimage der Größe 200 * 153 zu maskieren. Es wird genau den genauen Bereich mit Pixel-basierten Alpaka-Kanal-Mapping zuschneiden. Überall dort, wo das Maskenbild den Alpha-Kanal 0 (Transparenter Teil) hat, wird es abgeschnitten, indem es die Pixel dieses Bereichs aufnimmt und das Bild in Ihrem Fall auf die neue erforderliche Größe regeneriert. Sie müssen ein Maskenbild der Größe 200 * 153 Pixel in Ihrem Server behalten, um verwendet zu werden. Hier können Sie auch die geänderten Koordinaten durch Ajax-Aufrufe an das Backend übergeben und das Bild entsprechend beschneiden.
Wenn Sie die Möglichkeit haben, mit dem serverseitigen Skript zu arbeiten, funktioniert es. Der obige Link ist ein Beweis für das Konzept.
Tags und Links jquery asp.net-mvc-4