Image Cropper
TsgcHTMLComponent_ImageCropper: 프로필 사진과 스캔한 문서를 위한, 브라우저에서 실행되는 이미지 자르기 도구입니다. 사용자는 사진을 자르고, 확대하고, 회전하고, 뒤집거나, 페이지의 네 모서리를 표시해 반듯한 직사각형을 얻습니다. 서버는 코드나 디스크가 결과를 보기 전에 이를 검사합니다. Delphi, C++ Builder, .NET에서 사용할 수 있습니다.
TsgcHTMLComponent_ImageCropper: 프로필 사진과 스캔한 문서를 위한, 브라우저에서 실행되는 이미지 자르기 도구입니다. 사용자는 사진을 자르고, 확대하고, 회전하고, 뒤집거나, 페이지의 네 모서리를 표시해 반듯한 직사각형을 얻습니다. 서버는 코드나 디스크가 결과를 보기 전에 이를 검사합니다. Delphi, C++ Builder, .NET에서 사용할 수 있습니다.
결과의 모양과 크기를 설정하고 렌더링합니다. 사용자는 이미지를 선택하거나 끌어다 놓거나 붙여넣고, 또는 사진을 찍어 서버에 요청하지 않고 편집합니다. 저장은 원본 픽셀에서 결과를 렌더링하고, 브라우저에서 JPEG, PNG 또는 WebP로 인코딩하여 OnCrop으로 전송하며, UploadFolder는 파일을 고유한 이름으로 보관합니다.
TsgcHTMLComponent_ImageCropper, 사진 모드와 문서 모드 포함
도구 모음, 편집기, 실시간 미리 보기이며, 컴포넌트에 내장된 스크립트와 CSS로 구성되어 외부 라이브러리나 CDN이 필요 없습니다
Delphi, C++ Builder, .NET
512 x 512 JPEG 결과를 만드는 원형 자르기입니다. 서버는 이미지를 검사하고 고유한 이름으로 폴더에 기록하며, 저장이 끝나면 TargetSelector가 페이지에 새 아바타를 표시합니다.
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/'; // 서버에서 폴더에 매핑하십시오
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에 파일이 받는 고유한 이름을 붙인 값입니다
StoreAvatarURL(CurrentUserID, aInfo.URL); // 데이터베이스
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의 OnCrop: 이미지는 이미 서버가 검사했습니다
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);
}
// 코드로 만든 같은 자르기 도구, 문서 스캐너용
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;아바타와 커버를 위한 사진 편집기와, 페이지와 영수증을 위한 스캐너를 하나의 컴포넌트에 담았습니다.
이미지 위에 핸들 8개가 있는 사각형이 있습니다. 상자를 끌면 이동하고 핸들을 끌면 크기가 바뀌며, 원본의 MinCropSize픽셀 아래로는 줄어들지 않습니다. AspectRatio는 상자를 16:9 같은 비율로 고정하고, AspectRatios는 도구 모음의 사전 설정을 나열하며 기본값은 자유, 1:1, 4:3, 3:4, 16:9입니다.
CropShape icsCircle은 아바타를 위한 원형 마스크를 표시하고 상자를 1:1로 고정합니다. PNG와 WebP 결과는 모서리가 투명해지고, JPEG 결과에는 BackgroundColor가 적용됩니다. 결과의 실시간 썸네일은 원형이면 둥글게 표시되며 편집기 옆에 있습니다.
버튼, 마우스 휠 또는 핀치로 0.5배에서 16배까지 확대하고, 상자 밖에서 이미지를 끌어 이동합니다. 왼쪽과 오른쪽으로 90도 회전하고, 수평 맞추기 슬라이더로 -45도에서 45도까지 수평선을 맞추며, 가로 또는 세로로 뒤집습니다. 초기화는 전체 이미지로 되돌립니다.
Mode icmDocument에서는 사용자가 4개의 모서리를 페이지, 영수증 또는 화이트보드의 모서리로 끌어 놓으며, 4배 확대되는 돋보기가 표시됩니다. 결과는 사각형을 반듯한 직사각형으로 변환한 것이며, 원본 픽셀을 이중선형으로 샘플링합니다. 자동 가장자리 감지는 없으며 사용자가 모서리를 지정합니다.
원본, 회색조, 흑백, 그림자를 처리하는 적응형 임계값, 모든 색상 채널의 대비를 늘리는 선명하게가 있습니다. DocumentFilter는 초기 필터를 설정하며 사용자는 도구 모음에서 바꿀 수 있습니다.
파일을 선택하거나, 끌어다 놓거나, 클립보드에서 붙여넣거나, 보안 페이지에서 전면 또는 후면 카메라(FacingMode)로 사진을 찍을 수 있습니다. ImageURL은 현재 아바타 같은 초기 이미지를 로드합니다. 사진의 EXIF 방향이 적용되므로 휴대폰으로 찍은 세로 사진도 바르게 표시됩니다.
큰 이미지를 축소 사본으로 편집하더라도 결과는 항상 원본 픽셀에서 렌더링됩니다. OutputFormat은 JPEG, PNG 또는 WebP를, OutputQuality는 품질을, OutputWidth, OutputHeight, MaxOutputSize는 크기를 정합니다. 브라우저가 결과를 다시 인코딩하므로 원본의 EXIF와 GPS 데이터는 들어 있지 않습니다.
모든 동작을 키보드로 할 수 있습니다. 화살표 키는 자르기 상자나 포커스된 모서리를 1픽셀씩(Shift는 10픽셀) 이동하고, Alt+화살표는 상자 크기를 조정하며, +와 -는 확대/축소이고 R은 회전입니다. 자르기 상자와 모든 모서리는 값 텍스트가 있는 슬라이더이며, polite 라이브 리전이 자르기 크기와 저장 결과를 알립니다. 자르기 도구는 data-bs-theme="dark"와 동작 줄이기 설정을 따릅니다.
가장 자주 사용하는 멤버입니다.
서버는 브라우저를 신뢰하지 않습니다. 형식은 JPEG, PNG 또는 WebP이면서 OutputFormat과 일치해야 하고, 데이터는 디코딩 전후에 MaxResultSize와 대조하며, 매직 바이트는 해당 형식의 것이어야 하고, 헤더에서 읽은 너비와 높이는 MaxOutputSize 범위 안에서 전송된 크기와 같아야 합니다. 자르기 데이터의 모든 숫자는 범위를 검사하며, 원본 이름에서는 경로 부분이 제거됩니다.
OnCrop(Sender, aInfo, aStream, aAccept, aErrorMessage)는 검증된 정보와 이미지 바이트를 받습니다. 이미지를 직접 저장하거나 URL을 바꾸거나, aAccept를 False로 설정하고 원하는 텍스트를 지정하십시오. 이 이벤트는 요청의 스레드에서 발생하며 여기서 sgcHTMLRequestSession이 세션을 제공합니다.
UploadFolder를 사용하면 서버는 전송된 이름이 아니라 형식의 확장자가 붙은 32자리 16진수 고유 이름을 고르고, 이미지가 수락된 뒤에만 파일을 기록합니다. SavedFileName과 URL(UploadURL에 그 이름을 붙인 값)이 채워집니다. 컴포넌트는 폴더를 제공하지 않으므로 서버에서 UploadURL을 해당 폴더에 매핑하십시오.
FieldName은 결과를 data: URL로 받는 숨겨진 input의 이름이며, 이를 둘러싼 폼이 다른 필드와 함께 전송합니다. TargetSelector는 일치하는 모든 img 요소를 갱신하고, DOM 이벤트 sgc-image-cropped는 저장할 때마다 URL, 너비, 높이, 형식과 함께 버블링됩니다. 엔진이나 ActionURL이 없으면 저장은 브라우저에서 결과를 적용할 뿐입니다.
서버의 헤더 판독기는 공개되어 있으므로 사용자 고유의 코드도 같은 규칙으로 이미지를 검사할 수 있습니다. sgcHTMLImageInfo(aStream, aType, aWidth, aHeight)는 PNG, JPEG, WebP 이미지를 디코딩하지 않고 형식과 크기를 읽습니다. .NET에서는 sgcHTMLImageCropperHelpers의 정적 메서드입니다.
window.sgcImageCropper는 scan, instances, get, load, loadFile, setCrop, reset, result, save를 제공합니다. 스크립트는 htmx 교체 뒤에도 페이지의 모든 자르기 도구를 초기화하며, 한 페이지의 여러 자르기 도구가 이를 공유합니다.
Razor 뷰에서는 <sgc-image-cropper> Tag Helper가 자르기 도구를 렌더링하며, 저장은 UseSgcHtml의 컴포넌트 이벤트 엔드포인트로 전송됩니다. 속성의 목록에 없는 값은 페이지를 렌더링할 때 InvalidOperationException을 발생시키며, Kestrel의 MaxRequestBodySize는 여전히 요청 크기를 제한합니다.
Demos\60.HTML\01.RunTime\33.ImageCropper는 포트 8135에서 동작하는 서버 sgc Profile Studio로 자르기 도구 세 개가 있습니다. OnCrop으로 저장하는 원형 아바타, 모든 스캔을 UploadFolder에 보관하는 흑백 필터의 문서 스캐너, FieldName으로 폼과 함께 전송하는 16:9 제품 커버입니다. 디자인 타임, Lazarus, .NET 버전도 같은 구성입니다.
| 온라인으로 체험eSeGeCe 데모 서버에서 실시간으로 실행되는 이미지 자르기 데모로 확인해 보세요. | 열기 | |
| 온라인 도움말이 컴포넌트의 전체 API 레퍼런스와 사용 가이드입니다. | 열기 | |
| File Upload 컴포넌트파일을 멀티파트 폼 데이터로 전송하는 끌어다 놓기 업로드 영역입니다. | 열기 | |
| Camera Scanner 컴포넌트기기의 카메라로 바코드와 QR 코드를 스캔합니다. | 열기 | |
| 모든 sgcHTML 컴포넌트80개 이상 컴포넌트의 전체 기능 매트릭스를 살펴보십시오. | 열기 | |
| 무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함되어 있습니다. | 열기 | |
| 가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스. | 열기 |