TsgcHTMLComponent_ImageCropper: kadrator obrazów działający w przeglądarce, do zdjęć profilowych i zeskanowanych dokumentów. Użytkownicy kadrują, powiększają, obracają i odbijają zdjęcie albo zaznaczają 4 rogi strony, aby dostać z powrotem prosty prostokąt, a serwer sprawdza wynik, zanim zobaczy go Twój kod lub dysk, w Delphi, C++ Builder i .NET.
Ustaw kształt i rozmiar wyniku i wyrenderuj komponent. Użytkownik wybiera, upuszcza lub wkleja obraz albo robi zdjęcie i edytuje je bez żądań do serwera. Zapisz renderuje wynik z oryginalnych pikseli, koduje go w przeglądarce jako JPEG, PNG lub WebP i wysyła do OnCrop, a UploadFolder zachowuje plik pod unikalną nazwą.
TsgcHTMLComponent_ImageCropper, z trybem zdjęcia i trybem dokumentu
Pasek narzędzi, edytor i podgląd na żywo, ze skryptu i CSS wbudowanych w komponent, bez zewnętrznej biblioteki i bez CDN
Delphi, C++ Builder, .NET
Kadrator kołowy z wynikiem JPEG 512 x 512. Serwer sprawdza obraz, zapisuje go w folderze pod unikalną nazwą, a TargetSelector pokazuje nowy awatar na stronie po zapisaniu.
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/'; // zmapuj go na folder na swoim serwerze
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 to UploadURL plus unikalna nazwa nadana plikowi
StoreAvatarURL(CurrentUserID, aInfo.URL); // Twoja baza danych
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 w Tag Helper: obraz jest już sprawdzony przez serwer
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);
}
// ten sam kadrator w kodzie, dla skanera dokumentów
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;Edytor zdjęć dla awatarów i okładek oraz skaner dla stron i paragonów, w jednym komponencie.
Prostokąt z 8 uchwytami nad obrazem: przeciągnij ramkę, aby ją przesunąć, a uchwyt, aby zmienić jej rozmiar, nigdy poniżej MinCropSize pikseli źródła. AspectRatio blokuje ramkę na proporcji, takiej jak 16:9, a AspectRatios wymienia ustawienia paska narzędzi, domyślnie Dowolne, 1:1, 4:3, 3:4 i 16:9.
CropShape icsCircle pokazuje okrągłą maskę dla awatarów i blokuje ramkę na 1:1. Wyniki PNG i WebP dostają przezroczyste rogi, a wyniki JPEG dostają BackgroundColor. Miniatura wyniku na żywo, okrągła dla koła, znajduje się obok edytora.
Powiększaj przyciskami, kółkiem myszy lub gestem szczypnięcia, od 0,5 do 16 razy, i przeciągaj obraz poza ramką, aby go przesuwać. Obracaj w lewo i w prawo o 90 stopni, wyrównuj horyzont suwakiem Prostuj od -45 do 45 stopni, odbijaj w poziomie lub w pionie, a Resetuj wraca do całego obrazu.
Z Mode icmDocument użytkownik przeciąga 4 rogi na rogi strony, paragonu lub tablicy, z lupą w powiększeniu 4 razy. Wynikiem jest czworokąt odwzorowany na prosty prostokąt, z próbkowaniem dwuliniowym oryginalnych pikseli. Nie ma automatycznego wykrywania krawędzi: rogi ustawia użytkownik.
Oryginał, Skala szarości, Czarno-biały, adaptacyjny próg radzący sobie z cieniami oraz Popraw, rozciągnięcie kontrastu każdego kanału koloru. DocumentFilter ustawia filtr początkowy, a użytkownik może go zmienić na pasku narzędzi.
Wybierz plik, upuść go, wklej ze schowka albo zrób zdjęcie przednim lub tylnym aparatem (FacingMode) na bezpiecznej stronie. ImageURL wczytuje obraz początkowy, taki jak bieżący awatar. Orientacja EXIF zdjęcia jest stosowana, więc portret zrobiony telefonem jest wyprostowany.
Wynik jest zawsze renderowany z oryginalnych pikseli, nawet gdy duży obraz jest edytowany z pomniejszonej kopii. OutputFormat wybiera JPEG, PNG lub WebP, OutputQuality jakość, a OutputWidth, OutputHeight i MaxOutputSize rozmiar. Przeglądarka koduje wynik ponownie, więc nie ma w nim danych EXIF ani GPS źródła.
Każdą akcję można wykonać klawiaturą: strzałki przesuwają ramkę kadrowania lub aktywny róg o 1 piksel (Shift dla 10), Alt+strzałki zmieniają rozmiar ramki, + i - powiększają, a R obraca. Ramka kadrowania i każdy róg są suwakami z tekstem wartości, a uprzejmy region na żywo ogłasza rozmiar kadru i wynik zapisu. Kadrator podąża za data-bs-theme="dark" i ograniczonym ruchem.
Składowe, po które sięgasz najczęściej.
Serwer nigdy nie ufa przeglądarce. Typ musi być JPEG, PNG lub WebP i zgadzać się z OutputFormat, dane są sprawdzane względem MaxResultSize przed i po dekodowaniu, ich bajty magiczne muszą być bajtami tego typu, a szerokość i wysokość odczytane z nagłówka muszą być równe wysłanemu rozmiarowi w granicach MaxOutputSize. Każda liczba danych kadrowania jest sprawdzana pod kątem zakresu, a nazwa źródłowa traci części ścieżki.
OnCrop(Sender, aInfo, aStream, aAccept, aErrorMessage) otrzymuje zwalidowane informacje i bajty obrazu. Zapisz obraz samodzielnie, zmień adres URL albo ustaw aAccept na False z własnym tekstem. Uruchamia się w wątku żądania, gdzie sgcHTMLRequestSession daje sesję.
Z UploadFolder serwer wybiera unikalną nazwę z 32 znaków szesnastkowych z rozszerzeniem typu, nigdy wysłaną nazwę, i zapisuje plik dopiero po zaakceptowaniu obrazu. SavedFileName i URL, czyli UploadURL plus ta nazwa, są wypełniane. Komponent nie serwuje folderu: zmapuj na niego UploadURL na swoim serwerze.
FieldName nazywa ukryte pole, które otrzymuje wynik jako adres data:, więc otaczający formularz wysyła go razem z innymi polami. TargetSelector aktualizuje każdy pasujący element img, a zdarzenie DOM sgc-image-cropped propaguje się po każdym zapisie z adresem URL, szerokością, wysokością i typem. Bez silnika lub ActionURL Zapisz tylko stosuje wynik w przeglądarce.
Czytnik nagłówków serwera jest publiczny, więc Twój kod może sprawdzić obraz tą samą regułą: sgcHTMLImageInfo(aStream, aType, aWidth, aHeight) odczytuje typ i rozmiar obrazu PNG, JPEG lub WebP bez dekodowania. W .NET jest to metoda statyczna sgcHTMLImageCropperHelpers.
window.sgcImageCropper oferuje scan, instances, get, load, loadFile, setCrop, reset, result i save. Skrypt inicjalizuje każdy kadrator na stronie, także po podmianie htmx, a kilka kadratorów na jednej stronie dzieli go.
W widoku Razor Tag Helper <sgc-image-cropper> renderuje kadrator, a Zapisz wysyła do punktu końcowego zdarzeń komponentów z UseSgcHtml. Wartość spoza listy jego atrybutu zgłasza InvalidOperationException przy renderowaniu strony, a MaxRequestBodySize w Kestrel nadal ogranicza żądanie.
Demos\60.HTML\01.RunTime\33.ImageCropper to sgc Profile Studio, serwer na porcie 8135 z trzema kadratorami: kołowy awatar zapisywany przez OnCrop, skaner dokumentów z filtrem Czarno-biały, który zachowuje każdy skan w UploadFolder, oraz okładka produktu 16:9 wysyłana z formularzem przez FieldName. Wersje design time, Lazarus i .NET są jego odpowiednikami.
| Wypróbuj onlineZobacz to w demie Kadrowanie obrazów, działającym na żywo na serwerze demo eSeGeCe. | Otwórz | |
| Pomoc onlinePełna dokumentacja API i przewodnik użytkowania tego komponentu. | Otwórz | |
| Komponent File UploadStrefa przesyłania metodą przeciągnij i upuść, która wysyła pliki jako dane formularza multipart. | Otwórz | |
| Komponent Camera ScannerSkanuj kody kreskowe i kody QR aparatem urządzenia. | Otwórz | |
| Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 80+ komponentów. | Otwórz | |
| Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML. | Otwórz | |
| CennikLicencje Single, Team i Site z pełnym kodem źródłowym. | Otwórz |