TsgcHTMLComponent_ImageCropper: profil fotoğrafları ve taranmış belgeler için tarayıcıda çalışan bir görüntü kırpıcı. Kullanıcılar bir fotoğrafı kırpar, yakınlaştırır, döndürür ve çevirir ya da düz bir dikdörtgen elde etmek için bir sayfanın 4 köşesini işaretler; sunucu sonucu, kodunuz veya disk onu görmeden önce denetler, Delphi, C++ Builder ve .NET ile.
Sonucun biçimini ve boyutunu ayarlayın ve oluşturun. Kullanıcı bir görüntü seçer, bırakır veya yapıştırır ya da fotoğraf çeker ve sunucuya istek yapmadan düzenler. Kaydet sonucu özgün piksellerden oluşturur, tarayıcıda JPEG, PNG veya WebP olarak kodlar ve OnCrop olayına gönderir; UploadFolder dosyayı benzersiz bir adla saklar.
TsgcHTMLComponent_ImageCropper, bir fotoğraf kipi ve bir belge kipiyle
Bir araç çubuğu, düzenleyici ve canlı bir önizleme; bileşene gömülü bir betik ve CSS ile, harici kitaplık ve CDN olmadan
Delphi, C++ Builder, .NET
512 x 512 JPEG sonuçlu bir daire kırpıcı. Sunucu görüntüyü denetler, benzersiz bir adla bir klasöre yazar ve TargetSelector kaydedildikten sonra yeni avatarı sayfada gösterir.
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/'; // sunucunuzdaki klasöre eşleyin
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 artı dosyanın aldığı benzersiz addır
StoreAvatarURL(CurrentUserID, aInfo.URL); // veritabanınız
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;
// Tag Helper'ın OnCrop olayı: görüntü sunucu tarafından zaten denetlendi
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);
}
// aynı kırpıcı kodda, bir belge tarayıcısı için
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;Avatarlar ve kapaklar için bir fotoğraf düzenleyici ve sayfalar ile fişler için bir tarayıcı, tek bileşende.
Görüntünün üzerinde 8 tutamaçlı bir dikdörtgen: taşımak için kutuyu, yeniden boyutlandırmak için bir tutamacı sürükleyin; kaynağın MinCropSize pikselinin altına asla inmez. AspectRatio kutuyu 16:9 gibi bir orana kilitler ve AspectRatios araç çubuğunun hazır ayarlarını, varsayılan olarak Serbest, 1:1, 4:3, 3:4 ve 16:9, listeler.
CropShape icsCircle avatarlar için yuvarlak bir maske gösterir ve kutuyu 1:1 oranına kilitler. PNG ve WebP sonuçları saydam köşeler, JPEG sonuçları BackgroundColor değerini alır. Sonucun, daire için yuvarlak, canlı bir küçük resmi düzenleyicinin yanında durur.
Düğmelerle, fare tekeriyle veya çimdikle 0,5 ile 16 kat arasında yakınlaştırın ve kaydırmak için görüntüyü kutunun dışına sürükleyin. 90 derece sola ve sağa döndürün, ufku -45 ile 45 derece arasında Düzelt kaydırıcısıyla hizalayın, yatay veya dikey çevirin; Sıfırla tüm görüntüye döner.
Mode icmDocument ile kullanıcı 4 köşeyi bir sayfanın, bir fişin veya bir beyaz tahtanın köşelerine, 4 kat yakınlaştırmalı bir büyüteçle sürükler. Sonuç, özgün piksellerin çift doğrusal örneklemesiyle düz bir dikdörtgene eşlenen dörtgendir. Otomatik kenar algılama yoktur: köşeleri kullanıcı yerleştirir.
Özgün, Gri tonlama, Siyah beyaz, gölgelerle başa çıkan uyarlamalı bir eşik ve Geliştir, her renk kanalının bir kontrast germesi. DocumentFilter başlangıç filtresini ayarlar ve kullanıcı bunu araç çubuğunda değiştirebilir.
Bir dosya seçin, bırakın, panodan yapıştırın ya da güvenli bir sayfada ön veya arka kamerayla (FacingMode) fotoğraf çekin. ImageURL geçerli avatar gibi bir başlangıç görüntüsü yükler. Fotoğrafın EXIF yönü uygulanır, böylece bir telefonla çekilmiş dikey fotoğraf dik durur.
Büyük bir görüntü küçültülmüş bir kopyadan düzenlense bile sonuç her zaman özgün piksellerden oluşturulur. OutputFormat JPEG, PNG veya WebP seçer, OutputQuality kaliteyi, OutputWidth, OutputHeight ve MaxOutputSize boyutu belirler. Tarayıcı sonucu yeniden kodlar, bu yüzden kaynağın EXIF ve GPS verileri içinde yoktur.
Her eylem klavyeyle yapılabilir: oklar kırpma kutusunu veya odaklanılan köşeyi 1 piksel kaydırır (10 için Shift), Alt+oklar kutuyu yeniden boyutlandırır, + ve - yakınlaştırır ve R döndürür. Kırpma kutusu ve her köşe, değer metni olan kaydırıcılardır ve kibar bir canlı bölge kırpma boyutunu ve bir kaydın sonucunu duyurur. Kırpıcı data-bs-theme="dark" değerini ve azaltılmış hareketi izler.
En sık başvuracağınız üyeler.
Sunucu tarayıcıya asla güvenmez. Tür JPEG, PNG veya WebP olmalı ve OutputFormat ile eşleşmelidir, veriler kodu çözmeden önce ve sonra MaxResultSize değerine göre denetlenir, sihirli baytları türünkiler olmalıdır ve üst bilgiden okunan genişlik ve yükseklik, MaxOutputSize sınırları içinde gönderilen boyuta eşit olmalıdır. Kırpma verilerinin her sayısı aralık açısından denetlenir ve kaynak adı yol bölümlerini kaybeder.
OnCrop(Sender, aInfo, aStream, aAccept, aErrorMessage) doğrulanmış bilgiyi ve görüntü baytlarını alır. Görüntüyü kendiniz saklayın, URL'yi değiştirin ya da aAccept değerini False yapıp kendi metninizi yazın. İsteğin iş parçacığında tetiklenir; orada sgcHTMLRequestSession oturumu verir.
UploadFolder ile sunucu, gönderilen adı asla kullanmadan, türün uzantısıyla 32 onaltılık karakterden oluşan benzersiz bir ad seçer ve dosyayı yalnızca görüntü kabul edildikten sonra yazar. SavedFileName ve URL, yani UploadURL artı o ad, doldurulur. Bileşen klasörü sunmaz: UploadURL değerini sunucunuzda ona eşleyin.
FieldName, sonucu data: URL olarak alan gizli bir girdiyi adlandırır, böylece çevreleyen bir form onu diğer alanlarıyla birlikte gönderir. TargetSelector eşleşen her img öğesini günceller ve sgc-image-cropped DOM olayı, her kayıttan sonra URL, genişlik, yükseklik ve türle birlikte kabarır. Bir motor veya ActionURL olmadan Kaydet yalnızca sonucu tarayıcıda uygular.
Sunucunun üst bilgi okuyucusu geneldir, böylece kendi kodunuz bir görüntüyü aynı kuralla denetleyebilir: sgcHTMLImageInfo(aStream, aType, aWidth, aHeight) bir PNG, JPEG veya WebP görüntünün türünü ve boyutunu kodunu çözmeden okur. .NET'te sgcHTMLImageCropperHelpers sınıfının statik bir yöntemidir.
window.sgcImageCropper şunları sunar: scan, instances, get, load, loadFile, setCrop, reset, result ve save. Betik sayfadaki her kırpıcıyı, bir htmx değişiminden sonra da, başlatır ve bir sayfadaki birkaç kırpıcı onu paylaşır.
Bir Razor görünümünde <sgc-image-cropper> Tag Helper'ı kırpıcıyı oluşturur ve Kaydet, UseSgcHtml bileşen olayları uç noktasına gönderir. Niteliğinin listesinde olmayan bir değer, sayfa oluşturulurken bir InvalidOperationException fırlatır ve Kestrel'in MaxRequestBodySize değeri isteği yine de sınırlar.
Demos\60.HTML\01.RunTime\33.ImageCropper, 8135 numaralı bağlantı noktasında üç kırpıcılı bir sunucu olan sgc Profile Studio'dur: OnCrop ile kaydedilen bir daire avatar, her taramayı UploadFolder içinde tutan Siyah beyaz filtreli bir belge tarayıcısı ve formuyla birlikte FieldName üzerinden gönderilen 16:9 bir ürün kapağı. Tasarım zamanı, Lazarus ve .NET sürümleri bunu yansıtır.
| Online DeneyinGörüntü Kırpma demosunda görün, eSeGeCe demo sunucusunda canlı çalışıyor. | Aç | |
| Çevrimiçi yardımBu bileşenin tam API başvurusu ve kullanım kılavuzu. | Aç | |
| File Upload BileşeniDosyaları multipart form verisi olarak gönderen sürükle ve bırak yükleme alanı. | Aç | |
| Camera Scanner BileşeniCihazın kamerasıyla barkodları ve QR kodlarını tarayın. | Aç | |
| Tüm sgcHTML Bileşenleri80'den fazla bileşenin tüm özellik matrisine göz atın. | Aç | |
| Ücretsiz Deneme Sürümünü İndirin30 günlük deneme sürümü 60.HTML demo projelerini içerir. | Aç | |
| FiyatlandırmaTam kaynak kodlu Single, Team ve Site lisansları. | Aç |