TsgcHTMLComponent_ImageCropper: un ritagliatore di immagini che gira nel browser, per foto del profilo e documenti scansionati. Gli utenti ritagliano, ingrandiscono, ruotano e riflettono una foto, oppure segnano i 4 angoli di una pagina per ottenere un rettangolo dritto, e il server controlla il risultato prima che il tuo codice o il disco lo vedano, in Delphi, C++ Builder e .NET.
Imposta la forma e la dimensione del risultato e visualizzalo. L'utente seleziona, trascina o incolla un'immagine, oppure scatta una foto, e la modifica senza richieste al server. Salva renderizza il risultato dai pixel originali, lo codifica nel browser come JPEG, PNG o WebP e lo invia a OnCrop, e UploadFolder conserva il file con un nome univoco.
TsgcHTMLComponent_ImageCropper, con una modalità foto e una modalità documento
Una barra degli strumenti, l'editor e un'anteprima in tempo reale, da uno script e un CSS incorporati nel componente, senza librerie esterne e senza CDN
Delphi, C++ Builder, .NET
Un ritagliatore circolare con un risultato JPEG di 512 x 512. Il server controlla l'immagine, la scrive in una cartella con un nome univoco, e TargetSelector mostra il nuovo avatar nella pagina una volta salvato.
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/'; // associala alla cartella nel tuo 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 è UploadURL più il nome univoco che il file riceve
StoreAvatarURL(CurrentUserID, aInfo.URL); // il tuo 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 del Tag Helper: l'immagine è già stata controllata dal server
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);
}
// lo stesso ritagliatore nel codice, per uno scanner di documenti
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;Un editor di foto per avatar e copertine, e uno scanner per pagine e ricevute, in un unico componente.
Un rettangolo con 8 maniglie sopra l'immagine: trascina il riquadro per spostarlo e una maniglia per ridimensionarlo, mai sotto MinCropSize pixel dell'origine. AspectRatio blocca il riquadro a una proporzione come 16:9, e AspectRatios elenca i valori predefiniti della barra degli strumenti, Libero, 1:1, 4:3, 3:4 e 16:9 di default.
CropShape icsCircle mostra una maschera rotonda per gli avatar e blocca il riquadro a 1:1. I risultati PNG e WebP ottengono angoli trasparenti, e i risultati JPEG ottengono BackgroundColor. Una miniatura in tempo reale del risultato, rotonda per un cerchio, sta accanto all'editor.
Ingrandisci con i pulsanti, la rotellina del mouse o un gesto di pinch, da 0,5 a 16 volte, e trascina l'immagine fuori dal riquadro per spostarla. Ruota a sinistra e a destra di 90 gradi, livella un orizzonte con il cursore Raddrizza da -45 a 45 gradi, rifletti in orizzontale o in verticale, e Reimposta torna all'immagine intera.
Con Mode icmDocument l'utente trascina 4 angoli sugli angoli di una pagina, di una ricevuta o di una lavagna, con una lente a 4 volte lo zoom. Il risultato è il quadrilatero proiettato su un rettangolo dritto, con campionamento bilineare dei pixel originali. Non c'è rilevamento automatico dei bordi: è l'utente a posizionare gli angoli.
Originale, Scala di grigi, Bianco e nero, una soglia adattiva che gestisce le ombre, e Migliora, uno stiramento del contrasto di ogni canale colore. DocumentFilter imposta il filtro iniziale, e l'utente può cambiarlo nella barra degli strumenti.
Seleziona un file, trascinalo, incollalo dagli appunti, oppure scatta una foto con la fotocamera anteriore o posteriore (FacingMode) su una pagina sicura. ImageURL carica un'immagine iniziale, come l'avatar attuale. Viene applicato l'orientamento EXIF di una foto, così un ritratto scattato con un telefono risulta dritto.
Il risultato viene sempre renderizzato dai pixel originali, anche quando un'immagine grande viene modificata da una copia ridotta. OutputFormat seleziona JPEG, PNG o WebP, OutputQuality la qualità e OutputWidth, OutputHeight e MaxOutputSize la dimensione. Il browser codifica di nuovo il risultato, quindi i dati EXIF e GPS dell'origine non sono presenti.
Ogni azione si può fare con la tastiera: le frecce spostano il riquadro di ritaglio o l'angolo con il focus di 1 pixel (Maiusc per 10), Alt+frecce ridimensionano il riquadro, + e - ingrandiscono e R ruota. Il riquadro di ritaglio e ogni angolo sono cursori con un testo del valore, e una regione live cortese annuncia la dimensione del ritaglio e il risultato di un salvataggio. Il ritagliatore segue data-bs-theme="dark" e la riduzione del movimento.
I membri che usi più spesso.
Il server non si fida mai del browser. Il tipo deve essere JPEG, PNG o WebP e corrispondere a OutputFormat, i dati vengono controllati rispetto a MaxResultSize prima e dopo la decodifica, i suoi magic byte devono essere quelli del tipo, e la larghezza e l'altezza lette dall'intestazione devono essere uguali alla dimensione inviata entro MaxOutputSize. Ogni numero dei dati di ritaglio è controllato nel suo intervallo, e il nome di origine perde le parti del percorso.
OnCrop(Sender, aInfo, aStream, aAccept, aErrorMessage) riceve le informazioni validate e i byte dell'immagine. Memorizza l'immagine tu stesso, cambia l'URL, oppure imposta aAccept su False con il tuo testo. Scatta sul thread della richiesta, dove sgcHTMLRequestSession fornisce la sessione.
Con UploadFolder il server sceglie un nome univoco di 32 caratteri esadecimali con l'estensione del tipo, mai il nome inviato, e scrive il file solo dopo che l'immagine è stata accettata. SavedFileName e URL, che è UploadURL più quel nome, vengono compilati. Il componente non serve la cartella: associa UploadURL ad essa nel tuo server.
FieldName nomina un input nascosto che riceve il risultato come URL data:, così un modulo circostante lo invia insieme agli altri campi. TargetSelector aggiorna ogni elemento img corrispondente, e l'evento DOM sgc-image-cropped risale dopo ogni salvataggio con l'URL, la larghezza, l'altezza e il tipo. Senza un motore o ActionURL, Salva applica il risultato solo nel browser.
Il lettore di intestazioni del server è pubblico, quindi il tuo codice può controllare un'immagine con la stessa regola: sgcHTMLImageInfo(aStream, aType, aWidth, aHeight) legge il tipo e la dimensione di un'immagine PNG, JPEG o WebP senza decodificarla. In .NET è un metodo statico di sgcHTMLImageCropperHelpers.
window.sgcImageCropper offre scan, instances, get, load, loadFile, setCrop, reset, result e save. Lo script inizializza ogni ritagliatore della pagina, anche dopo uno scambio htmx, e più ritagliatori in una pagina lo condividono.
In una vista Razor il Tag Helper <sgc-image-cropper> renderizza il ritagliatore, e Salva invia all'endpoint degli eventi dei componenti di UseSgcHtml. Un valore che non è nell'elenco del suo attributo lancia una InvalidOperationException quando la pagina viene renderizzata, e il MaxRequestBodySize di Kestrel limita comunque la richiesta.
Demos\60.HTML\01.RunTime\33.ImageCropper è sgc Profile Studio, un server sulla porta 8135 con tre ritagliatori: un avatar circolare salvato tramite OnCrop, uno scanner di documenti con il filtro Bianco e nero che conserva ogni scansione in UploadFolder, e una copertina prodotto 16:9 inviata con il suo modulo tramite FieldName. Le versioni design time, Lazarus e .NET lo replicano.
| Provalo onlineGuardalo nella demo Ritaglio immagini, in esecuzione dal vivo sul server demo di eSeGeCe. | Apri | |
| Guida in lineaRiferimento API completo e guida all'uso di questo componente. | Apri | |
| Componente FileUploadUna zona di caricamento drag and drop che invia i file come dati di modulo multipart. | Apri | |
| Componente CameraScannerScansiona codici a barre e codici QR con la fotocamera del dispositivo. | Apri | |
| Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 80 componenti. | Apri | |
| Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML. | Apri | |
| PrezziLicenze Single, Team e Site con codice sorgente completo. | Apri |