TsgcHTMLComponent_ImageCropper : un outil de recadrage d'images qui s'exécute dans le navigateur, pour les photos de profil et les documents numérisés. Les utilisateurs recadrent, zooment, font pivoter et retournent une photo, ou marquent les 4 coins d'une page pour obtenir un rectangle redressé, et le serveur vérifie le résultat avant que votre code ou le disque ne le voie, en Delphi, C++ Builder et .NET.
Définissez la forme et la taille du résultat et rendez le composant. L'utilisateur sélectionne, dépose ou colle une image, ou prend une photo, et la modifie sans aucune requête vers le serveur. Enregistrer rend le résultat à partir des pixels d'origine, l'encode dans le navigateur en JPEG, PNG ou WebP et l'envoie à OnCrop, et UploadFolder conserve le fichier sous un nom unique.
TsgcHTMLComponent_ImageCropper, avec un mode photo et un mode document
Une barre d'outils, l'éditeur et un aperçu en direct, à partir d'un script et d'un CSS intégrés au composant, sans bibliothèque externe et sans CDN
Delphi, C++ Builder, .NET
Un recadrage circulaire avec un résultat JPEG de 512 x 512. Le serveur vérifie l'image, l'écrit dans un dossier sous un nom unique, et TargetSelector affiche le nouvel avatar dans la page une fois enregistré.
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/'; // map it to the folder in your 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 the unique name the file gets
StoreAvatarURL(CurrentUserID, aInfo.URL); // your 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 of the Tag Helper: the image is already checked by the 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);
}
// the same cropper in code, for a document scanner
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 éditeur de photos pour avatars et couvertures, et un scanner pour pages et reçus, dans un seul composant.
Un rectangle avec 8 poignées sur l'image : faites glisser le cadre pour le déplacer et une poignée pour le redimensionner, jamais en dessous de MinCropSize pixels de la source. AspectRatio verrouille le cadre sur un rapport comme 16:9, et AspectRatios liste les préréglages de la barre d'outils, Libre, 1:1, 4:3, 3:4 et 16:9 par défaut.
CropShape icsCircle affiche un masque rond pour les avatars et verrouille le cadre sur 1:1. Les résultats PNG et WebP ont des coins transparents, et les résultats JPEG reçoivent BackgroundColor. Une miniature en direct du résultat, ronde pour un cercle, se trouve à côté de l'éditeur.
Zoomez avec les boutons, la molette de la souris ou un pincement, de 0,5 à 16 fois, et faites glisser l'image hors du cadre pour la déplacer. Pivotez à gauche et à droite de 90 degrés, mettez un horizon à niveau avec le curseur Redresser de -45 à 45 degrés, retournez horizontalement ou verticalement, et Réinitialiser revient à l'image entière.
Avec Mode icmDocument, l'utilisateur fait glisser 4 coins sur les coins d'une page, d'un reçu ou d'un tableau blanc, avec une loupe à 4 fois le zoom. Le résultat est le quadrilatère projeté sur un rectangle droit, avec un échantillonnage bilinéaire des pixels d'origine. Il n'y a pas de détection automatique des bords : l'utilisateur place les coins.
Original, Niveaux de gris, Noir et blanc, un seuil adaptatif qui gère les ombres, et Améliorer, un étirement du contraste de chaque canal de couleur. DocumentFilter définit le filtre initial, et l'utilisateur peut le changer dans la barre d'outils.
Sélectionnez un fichier, déposez-le, collez-le depuis le presse-papiers, ou prenez une photo avec la caméra avant ou arrière (FacingMode) sur une page sécurisée. ImageURL charge une image initiale comme l'avatar actuel. L'orientation EXIF d'une photo est appliquée, de sorte qu'un portrait pris avec un téléphone est à l'endroit.
Le résultat est toujours rendu à partir des pixels d'origine, même lorsqu'une grande image est modifiée à partir d'une copie réduite. OutputFormat sélectionne JPEG, PNG ou WebP, OutputQuality la qualité et OutputWidth, OutputHeight et MaxOutputSize la taille. Le navigateur encode de nouveau le résultat, de sorte que les données EXIF et GPS de la source n'y figurent pas.
Toute action peut se faire au clavier : les flèches déplacent le cadre de recadrage ou le coin ayant le focus de 1 pixel (Maj pour 10), Alt+flèches redimensionnent le cadre, + et - zooment et R fait pivoter. Le cadre de recadrage et chaque coin sont des curseurs avec un texte de valeur, et une région live polie annonce la taille du recadrage et le résultat d'un enregistrement. Le recadrage suit data-bs-theme="dark" et la réduction des animations.
Les membres que vous utiliserez le plus souvent.
Le serveur ne fait jamais confiance au navigateur. Le type doit être JPEG, PNG ou WebP et correspondre à OutputFormat, les données sont vérifiées par rapport à MaxResultSize avant et après le décodage, ses octets magiques doivent être ceux du type, et la largeur et la hauteur lues dans l'en-tête doivent égaler la taille envoyée dans la limite de MaxOutputSize. Chaque nombre des données de recadrage est vérifié dans ses bornes, et le nom source perd ses éléments de chemin.
OnCrop(Sender, aInfo, aStream, aAccept, aErrorMessage) reçoit les informations validées et les octets de l'image. Stockez l'image vous-même, changez l'URL, ou définissez aAccept à False avec votre propre texte. Il se déclenche sur le thread de la requête, où sgcHTMLRequestSession donne la session.
Avec UploadFolder, le serveur choisit un nom unique de 32 caractères hexadécimaux avec l'extension du type, jamais le nom envoyé, et n'écrit le fichier qu'une fois l'image acceptée. SavedFileName et URL, qui est UploadURL plus ce nom, sont renseignés. Le composant ne sert pas le dossier : mappez UploadURL dessus dans votre serveur.
FieldName nomme un champ masqué qui reçoit le résultat sous forme d'URL data:, de sorte qu'un formulaire environnant l'envoie avec ses autres champs. TargetSelector met à jour chaque élément img correspondant, et l'événement DOM sgc-image-cropped remonte après chaque enregistrement avec l'URL, la largeur, la hauteur et le type. Sans moteur ni ActionURL, Enregistrer applique seulement le résultat dans le navigateur.
Le lecteur d'en-tête du serveur est public, de sorte que votre propre code peut vérifier une image avec la même règle : sgcHTMLImageInfo(aStream, aType, aWidth, aHeight) lit le type et la taille d'une image PNG, JPEG ou WebP sans la décoder. En .NET, c'est une méthode statique de sgcHTMLImageCropperHelpers.
window.sgcImageCropper propose scan, instances, get, load, loadFile, setCrop, reset, result et save. Le script initialise chaque recadrage de la page, aussi après une insertion htmx, et plusieurs recadrages sur une page le partagent.
Dans une vue Razor, le Tag Helper <sgc-image-cropper> rend le recadrage, et Enregistrer envoie vers le point de terminaison des événements de composants de UseSgcHtml. Une valeur absente de la liste de son attribut lève une InvalidOperationException au rendu de la page, et le MaxRequestBodySize de Kestrel plafonne toujours la requête.
Demos\60.HTML\01.RunTime\33.ImageCropper est sgc Profile Studio, un serveur sur le port 8135 avec trois recadrages : un avatar circulaire enregistré via OnCrop, un scanner de documents avec le filtre Noir et blanc qui conserve chaque numérisation dans UploadFolder, et une couverture de produit 16:9 envoyée avec son formulaire via FieldName. Les versions design time, Lazarus et .NET en sont le miroir.
| Essayer en ligneVoyez-le dans la démo Recadrage d'images, en fonctionnement direct sur le serveur de démos d'eSeGeCe. | Ouvrir | |
| Aide en ligneRéférence API complète et guide d'utilisation pour ce composant. | Ouvrir | |
| Composant File UploadUne zone de téléversement par glisser-déposer qui envoie les fichiers en multipart form data. | Ouvrir | |
| Composant Camera ScannerScannez des codes-barres et des codes QR avec la caméra de l'appareil. | Ouvrir | |
| Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 80 composants. | Ouvrir | |
| Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML. | Ouvrir | |
| TarifsLicences Single, Team et Site avec code source complet. | Ouvrir |