TsgcHTMLComponent_ImageCropper: een afbeeldingssnijder die in de browser draait, voor profielfoto's en gescande documenten. Gebruikers snijden een foto bij, zoomen, draaien en spiegelen haar, of markeren de 4 hoeken van een pagina om een rechte rechthoek terug te krijgen, en de server controleert het resultaat voordat je code of de schijf het ziet, in Delphi, C++ Builder en .NET.
Stel de vorm en het formaat van het resultaat in en render hem. De gebruiker selecteert, sleept of plakt een afbeelding, of maakt een foto, en bewerkt haar zonder verzoek aan de server. Opslaan rendert het resultaat vanuit de originele pixels, codeert het in de browser als JPEG, PNG of WebP en post het naar OnCrop, en UploadFolder bewaart het bestand onder een unieke naam.
TsgcHTMLComponent_ImageCropper, met een fotomodus en een documentmodus
Een werkbalk, de editor en een live voorbeeld, uit een script en CSS die in het component zijn ingebed, zonder externe bibliotheek en zonder CDN
Delphi, C++ Builder, .NET
Een cirkelsnijder met een JPEG-resultaat van 512 x 512. De server controleert de afbeelding, schrijft haar onder een unieke naam in een map, en TargetSelector toont de nieuwe avatar in de pagina zodra die is opgeslagen.
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/'; // wijs hem toe aan de map in je server
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 is UploadURL plus de unieke naam die het bestand krijgt
StoreAvatarURL(CurrentUserID, aInfo.URL); // je database
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 van de Tag Helper: de afbeelding is al door de server gecontroleerd
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);
}
// dezelfde cropper in code, voor een documentscanner
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;Een foto-editor voor avatars en omslagen, en een scanner voor pagina's en bonnetjes, in één component.
Een rechthoek met 8 grepen boven de afbeelding: sleep het kader om het te verplaatsen en een greep om het formaat te wijzigen, nooit onder MinCropSize pixels van de bron. AspectRatio vergrendelt het kader op een verhouding zoals 16:9, en AspectRatios somt de voorinstellingen van de werkbalk op, standaard Vrij, 1:1, 4:3, 3:4 en 16:9.
CropShape icsCircle toont een ronde mal voor avatars en vergrendelt het kader op 1:1. PNG- en WebP-resultaten krijgen transparante hoeken, JPEG-resultaten krijgen BackgroundColor. Een live miniatuur van het resultaat, rond bij een cirkel, staat naast de editor.
Zoom met de knoppen, het muiswiel of een knijpgebaar, van 0,5 tot 16 keer, en sleep de afbeelding buiten het kader om te verschuiven. Draai 90 graden naar links en rechts, zet een horizon recht met de schuifregelaar Rechtzetten van -45 tot 45 graden, spiegel horizontaal of verticaal, en Opnieuw instellen gaat terug naar de hele afbeelding.
Met Mode icmDocument sleept de gebruiker 4 hoeken naar de hoeken van een pagina, een bonnetje of een whiteboard, met een loep op 4 keer zoom. Het resultaat is de vierhoek afgebeeld op een rechte rechthoek, met bilineaire bemonstering van de originele pixels. Er is geen automatische randdetectie: de gebruiker plaatst de hoeken.
Origineel, Grijstinten, Zwart-wit, een adaptieve drempel die met schaduwen overweg kan, en Verbeteren, een contrastuitrekking van elk kleurkanaal. DocumentFilter stelt het beginfilter in, en de gebruiker kan het in de werkbalk wijzigen.
Selecteer een bestand, sleep het, plak het vanaf het klembord, of maak een foto met de voor- of de achtercamera (FacingMode) op een beveiligde pagina. ImageURL laadt een beginafbeelding zoals de huidige avatar. De EXIF-oriëntatie van een foto wordt toegepast, zodat een met een telefoon genomen staande foto rechtop staat.
Het resultaat wordt altijd vanuit de originele pixels gerenderd, ook wanneer een grote afbeelding vanaf een verkleinde kopie wordt bewerkt. OutputFormat kiest JPEG, PNG of WebP, OutputQuality de kwaliteit en OutputWidth, OutputHeight en MaxOutputSize het formaat. De browser codeert het resultaat opnieuw, zodat de EXIF- en GPS-gegevens van de bron er niet in zitten.
Elke actie kan met het toetsenbord: de pijltoetsen verplaatsen het uitsnedekader of de gefocuste hoek met 1 pixel (Shift voor 10), Alt+pijltoetsen wijzigen het formaat van het kader, + en - zoomen en R draait. Het uitsnedekader en elke hoek zijn schuifregelaars met een waardetekst, en een beleefd live-gebied kondigt het uitsnedeformaat en het resultaat van een opslag aan. De cropper volgt data-bs-theme="dark" en verminderde beweging.
De leden die je het vaakst gebruikt.
De server vertrouwt de browser nooit. Het type moet JPEG, PNG of WebP zijn en overeenkomen met OutputFormat, de gegevens worden voor en na het decoderen gecontroleerd tegen MaxResultSize, de magic bytes moeten die van het type zijn, en de uit de header gelezen breedte en hoogte moeten binnen MaxOutputSize gelijk zijn aan het verzonden formaat. Elk getal van de uitsnedegegevens wordt op bereik gecontroleerd, en de bronnaam verliest zijn padonderdelen.
OnCrop(Sender, aInfo, aStream, aAccept, aErrorMessage) ontvangt de gevalideerde info en de afbeeldingsbytes. Bewaar de afbeelding zelf, wijzig de URL of zet aAccept op False met een eigen tekst. Het wordt geactiveerd op de thread van het verzoek, waar sgcHTMLRequestSession de sessie geeft.
Met UploadFolder kiest de server een unieke naam van 32 hexadecimale tekens met de extensie van het type, nooit de verzonden naam, en schrijft het bestand pas nadat de afbeelding is geaccepteerd. SavedFileName en URL, dat is UploadURL plus die naam, worden ingevuld. Het component levert de map niet: wijs UploadURL in je server ernaar toe.
FieldName noemt een verborgen invoerveld dat het resultaat als data:-URL ontvangt, zodat een omringend formulier het samen met zijn andere velden verzendt. TargetSelector werkt elk overeenkomend img-element bij, en het DOM-event sgc-image-cropped borrelt na elke opslag op met URL, breedte, hoogte en type. Zonder engine of ActionURL past Opslaan het resultaat alleen in de browser toe.
De headerlezer van de server is publiek, zodat je eigen code een afbeelding volgens dezelfde regel kan controleren: sgcHTMLImageInfo(aStream, aType, aWidth, aHeight) leest het type en het formaat van een PNG-, JPEG- of WebP-afbeelding zonder haar te decoderen. In .NET is het een statische methode van sgcHTMLImageCropperHelpers.
window.sgcImageCropper biedt scan, instances, get, load, loadFile, setCrop, reset, result en save. Het script initialiseert elke cropper van de pagina, ook na een htmx-wissel, en meerdere croppers op één pagina delen het.
In een Razor-view rendert de Tag Helper <sgc-image-cropper> de cropper, en Opslaan post naar het componenteventeindpunt van UseSgcHtml. Een waarde die niet in de lijst van zijn attribuut staat, gooit een InvalidOperationException wanneer de pagina rendert, en de MaxRequestBodySize van Kestrel begrenst het verzoek nog steeds.
Demos\60.HTML\01.RunTime\33.ImageCropper is sgc Profile Studio, een server op poort 8135 met drie croppers: een cirkelavatar die via OnCrop wordt opgeslagen, een documentscanner met het filter Zwart-wit die elke scan in UploadFolder bewaart, en een 16:9-productomslag die via FieldName met zijn formulier wordt gepost. De designtime-, Lazarus- en .NET-versies spiegelen het.
| Online proberenBekijk het in de demo Afbeelding bijsnijden, live draaiend op de eSeGeCe-demoserver. | Openen | |
| Online helpVolledige API-referentie en gebruikshandleiding voor dit component. | Openen | |
| FileUpload-componentEen sleep-en-neerzetzone voor uploads die bestanden als multipart-formuliergegevens post. | Openen | |
| CameraScanner-componentScan barcodes en QR-codes met de camera van het apparaat. | Openen | |
| Alle sgcHTML-componentenBlader door de volledige functiematrix van 80+ componenten. | Openen | |
| Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten. | Openen | |
| PrijzenSingle-, Team- en Site-licenties met volledige broncode. | Openen |