TsgcHTMLComponent_ImageCropper: ein Bildzuschnitt, der im Browser läuft, für Profilfotos und gescannte Dokumente. Benutzer schneiden ein Foto zu, zoomen, drehen und spiegeln es, oder markieren die 4 Ecken einer Seite, um ein gerades Rechteck zurückzubekommen, und der Server prüft das Ergebnis, bevor Ihr Code oder die Festplatte es sieht, in Delphi, C++ Builder und .NET.
Legen Sie Form und Größe des Ergebnisses fest und rendern Sie ihn. Der Benutzer wählt ein Bild aus, legt es per Drag and Drop ab oder fügt es ein, oder nimmt ein Foto auf, und bearbeitet es ohne Anfrage an den Server. Speichern rendert das Ergebnis aus den Originalpixeln, kodiert es im Browser als JPEG, PNG oder WebP und sendet es an OnCrop, und UploadFolder behält die Datei unter einem eindeutigen Namen.
TsgcHTMLComponent_ImageCropper mit einem Fotomodus und einem Dokumentmodus
Eine Symbolleiste, der Editor und eine Live-Vorschau, aus einem in die Komponente eingebetteten Skript und CSS, ohne externe Bibliothek und ohne CDN
Delphi, C++ Builder, .NET
Ein Kreis-Zuschnitt mit einem JPEG-Ergebnis von 512 x 512. Der Server prüft das Bild, schreibt es unter einem eindeutigen Namen in einen Ordner, und TargetSelector zeigt den neuen Avatar in der Seite, sobald er gespeichert ist.
uses
sgcHTML_Component_ImageCropper;
oCropper := TsgcHTMLComponent_ImageCropper.Create(Self);
oCropper.Name := 'AvatarCropper';
oCropper.HTMXEngine := sgcHTMXEngine1;
oCropper.CropperID := 'avatarCropper';
oCropper.CropShape := icsCircle;
oCropper.OutputWidth := 512;
oCropper.OutputHeight := 512;
oCropper.UploadFolder := 'C:\Portal\avatars';
oCropper.UploadURL := '/avatars/'; // ordnen Sie ihn dem Ordner in Ihrem Server zu
oCropper.TargetSelector := '#avatar';
oCropper.OnCrop := CropperCrop;
oTemplate.BodyContent := '<img id="avatar" src="/avatars/default.jpg" alt="Avatar">' +
oCropper.HTML;
procedure TForm1.CropperCrop(Sender: TObject; const aInfo: TsgcHTMLImageCropInfo;
aStream: TStream; var aAccept: Boolean; var aErrorMessage: string);
begin
// aInfo.URL ist UploadURL plus der eindeutige Name der Datei
StoreAvatarURL(CurrentUserID, aInfo.URL); // Ihre Datenbank
end;@* Views/Profile/Photo.cshtml *@
@model ProfileModel
<img id="avatar" src="/avatars/current.jpg" alt="Avatar">
<sgc-image-cropper name="avatar" cropper-id="avatarCropper"
crop-shape="circle" output-width="512" output-height="512"
upload-folder="wwwroot/avatars" upload-url="/avatars/"
target-selector="#avatar" aria-label="Change your photo"
on-crop="Model.CheckCrop" />using esegece.sgcWebSockets;
// OnCrop des Tag Helpers: Das Bild ist vom Server bereits geprüft
public void CheckCrop(object sender, TsgcHTMLImageCropInfo aInfo, Stream aStream,
ref bool aAccept, ref string aErrorMessage)
{
if (!User.Identity!.IsAuthenticated)
{
aAccept = false;
aErrorMessage = "Sign in to change your photo";
return;
}
Profiles.SetAvatar(User, aInfo.URL);
}
// derselbe Cropper im Code, für einen Dokumentscanner
var cropper = new TsgcHTMLComponent_ImageCropper();
cropper.Name = "ScanCropper";
cropper.HTMXEngine = engine;
cropper.Mode = TsgcHTMLImageCropperMode.icmDocument;
cropper.DocumentFilter = TsgcHTMLImageCropFilter.icflBlackWhite;
cropper.OutputFormat = TsgcHTMLImageCropFormat.icfPNG;
cropper.UploadFolder = @"C:\Portal\scans";
template.BodyContent = cropper.HTML;Ein Foto-Editor für Avatare und Titelbilder und ein Scanner für Seiten und Belege, in einer Komponente.
Ein Rechteck mit 8 Griffen über dem Bild: Ziehen Sie den Rahmen, um ihn zu verschieben, und einen Griff, um seine Größe zu ändern, nie unter MinCropSize Pixel der Quelle. AspectRatio sperrt den Rahmen auf ein Verhältnis wie 16:9, und AspectRatios listet die Voreinstellungen der Symbolleiste auf, standardmäßig Frei, 1:1, 4:3, 3:4 und 16:9.
CropShape icsCircle zeigt eine runde Maske für Avatare und sperrt den Rahmen auf 1:1. PNG- und WebP-Ergebnisse erhalten transparente Ecken, JPEG-Ergebnisse erhalten BackgroundColor. Eine Live-Miniatur des Ergebnisses, bei einem Kreis rund, steht neben dem Editor.
Zoomen mit den Schaltflächen, dem Mausrad oder einer Pinch-Geste, von 0,5- bis 16-fach, und das Bild außerhalb des Rahmens ziehen, um zu verschieben. Um 90 Grad nach links und rechts drehen, einen Horizont mit dem Schieberegler Geraderichten von -45 bis 45 Grad ausrichten, horizontal oder vertikal spiegeln, und Zurücksetzen geht zum ganzen Bild zurück.
Mit Mode icmDocument zieht der Benutzer 4 Ecken auf die Ecken einer Seite, eines Belegs oder eines Whiteboards, mit einer Lupe bei vierfachem Zoom. Das Ergebnis ist das Viereck, abgebildet auf ein gerades Rechteck, mit bilinearer Abtastung der Originalpixel. Es gibt keine automatische Kantenerkennung: Der Benutzer setzt die Ecken.
Original, Graustufen, Schwarzweiß, ein adaptiver Schwellenwert, der mit Schatten zurechtkommt, und Verbessern, eine Kontrastspreizung jedes Farbkanals. DocumentFilter legt den anfänglichen Filter fest, und der Benutzer kann ihn in der Symbolleiste ändern.
Eine Datei auswählen, ablegen, aus der Zwischenablage einfügen oder ein Foto mit der Front- oder der Rückkamera (FacingMode) auf einer sicheren Seite aufnehmen. ImageURL lädt ein Anfangsbild wie den aktuellen Avatar. Die EXIF-Ausrichtung eines Fotos wird angewendet, sodass ein mit dem Handy aufgenommenes Hochformat aufrecht steht.
Das Ergebnis wird immer aus den Originalpixeln gerendert, auch wenn ein großes Bild von einer verkleinerten Kopie aus bearbeitet wird. OutputFormat wählt JPEG, PNG oder WebP, OutputQuality die Qualität und OutputWidth, OutputHeight und MaxOutputSize die Größe. Der Browser kodiert das Ergebnis erneut, sodass die EXIF- und GPS-Daten der Quelle nicht darin enthalten sind.
Jede Aktion lässt sich mit der Tastatur ausführen: Die Pfeiltasten verschieben den Zuschnittrahmen oder die fokussierte Ecke um 1 Pixel (mit Umschalt um 10), Alt+Pfeiltasten ändern die Größe des Rahmens, + und - zoomen und R dreht. Der Zuschnittrahmen und jede Ecke sind Schieberegler mit einem Werttext, und ein höflicher Live-Bereich kündigt die Zuschnittgröße und das Ergebnis eines Speicherns an. Der Cropper folgt data-bs-theme="dark" und reduzierter Bewegung.
Die Member, zu denen Sie am häufigsten greifen.
Der Server vertraut dem Browser nie. Der Typ muss JPEG, PNG oder WebP sein und zu OutputFormat passen, die Daten werden vor und nach dem Dekodieren gegen MaxResultSize geprüft, ihre Magic Bytes müssen die des Typs sein, und die aus dem Header gelesene Breite und Höhe müssen innerhalb von MaxOutputSize der gesendeten Größe entsprechen. Jede Zahl der Zuschnittdaten wird auf Bereich geprüft, und der Quellname verliert seine Pfadteile.
OnCrop(Sender, aInfo, aStream, aAccept, aErrorMessage) erhält die validierten Infos und die Bildbytes. Speichern Sie das Bild selbst, ändern Sie die URL oder setzen Sie aAccept auf False mit einem eigenen Text. Es wird im Thread der Anfrage ausgelöst, wo sgcHTMLRequestSession die Sitzung liefert.
Mit UploadFolder wählt der Server einen eindeutigen Namen aus 32 Hexadezimalzeichen mit der Erweiterung des Typs, nie den gesendeten Namen, und schreibt die Datei erst, nachdem das Bild akzeptiert wurde. SavedFileName und URL, also UploadURL plus dieser Name, werden gefüllt. Die Komponente liefert den Ordner nicht aus: Ordnen Sie UploadURL ihm in Ihrem Server zu.
FieldName benennt ein verstecktes Eingabefeld, das das Ergebnis als data:-URL erhält, sodass ein umgebendes Formular es mit seinen anderen Feldern sendet. TargetSelector aktualisiert jedes passende img-Element, und das DOM-Ereignis sgc-image-cropped steigt nach jedem Speichern mit URL, Breite, Höhe und Typ auf. Ohne Engine oder ActionURL wendet Speichern das Ergebnis nur im Browser an.
Der Header-Leser des Servers ist öffentlich, sodass Ihr eigener Code ein Bild nach derselben Regel prüfen kann: sgcHTMLImageInfo(aStream, aType, aWidth, aHeight) liest den Typ und die Größe eines PNG-, JPEG- oder WebP-Bilds, ohne es zu dekodieren. In .NET ist es eine statische Methode von sgcHTMLImageCropperHelpers.
window.sgcImageCropper bietet scan, instances, get, load, loadFile, setCrop, reset, result und save. Das Skript initialisiert jeden Cropper der Seite, auch nach einem htmx-Austausch, und mehrere Cropper auf einer Seite teilen es.
In einer Razor-View rendert der Tag Helper <sgc-image-cropper> den Cropper, und Speichern sendet an den Komponenten-Ereignis-Endpunkt von UseSgcHtml. Ein Wert, der nicht in der Liste seines Attributs steht, löst beim Rendern der Seite eine InvalidOperationException aus, und die MaxRequestBodySize von Kestrel begrenzt die Anfrage weiterhin.
Demos\60.HTML\01.RunTime\33.ImageCropper ist sgc Profile Studio, ein Server auf Port 8135 mit drei Croppern: ein Kreis-Avatar, der über OnCrop gespeichert wird, ein Dokumentscanner mit dem Filter Schwarzweiß, der jeden Scan in UploadFolder behält, und ein 16:9-Produktbild, das über FieldName mit seinem Formular gesendet wird. Die Designtime-, Lazarus- und .NET-Versionen spiegeln sie.
| Online ausprobierenSehen Sie es in der Demo Bildzuschnitt, live auf dem eSeGeCe-Demoserver. | Öffnen | |
| Online-HilfeVollständige API-Referenz und Verwendungshandbuch für diese Komponente. | Öffnen | |
| FileUpload-KomponenteEine Drag-and-Drop-Upload-Zone, die Dateien als Multipart-Formulardaten sendet. | Öffnen | |
| CameraScanner-KomponenteBarcodes und QR-Codes mit der Kamera des Geräts scannen. | Öffnen | |
| Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 80 Komponenten. | Öffnen | |
| Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte. | Öffnen | |
| PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode. | Öffnen |