TsgcHTMLComponent_ImageCropper: um recortador de imagens que roda no navegador, para fotos de perfil e documentos digitalizados. Os usuários recortam, ampliam, giram e invertem uma foto, ou marcam os 4 cantos de uma página para receber de volta um retângulo reto, e o servidor verifica o resultado antes que o seu código ou o disco o veja, em Delphi, C++ Builder e .NET.
Defina a forma e o tamanho do resultado e renderize. O usuário seleciona, solta ou cola uma imagem, ou tira uma foto, e a edita sem nenhuma requisição ao servidor. Salvar renderiza o resultado a partir dos pixels originais, o codifica no navegador como JPEG, PNG ou WebP e o envia a OnCrop, e UploadFolder guarda o arquivo com um nome único.
TsgcHTMLComponent_ImageCropper, com um modo foto e um modo documento
Uma barra de ferramentas, o editor e uma visualização ao vivo, a partir de um script e CSS embutidos no componente, sem biblioteca externa e sem CDN
Delphi, C++ Builder, .NET
Um recortador circular com um resultado JPEG de 512 x 512. O servidor verifica a imagem, a grava em uma pasta com um nome único, e TargetSelector mostra o novo avatar na página depois de salvo.
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;Um editor de fotos para avatares e capas, e um scanner para páginas e recibos, em um só componente.
Um retângulo com 8 alças sobre a imagem: arraste a caixa para movê-la e uma alça para redimensioná-la, nunca abaixo de MinCropSize pixels da origem. AspectRatio trava a caixa em uma proporção como 16:9, e AspectRatios lista as predefinições da barra de ferramentas, Livre, 1:1, 4:3, 3:4 e 16:9 por padrão.
CropShape icsCircle mostra uma máscara redonda para avatares e trava a caixa em 1:1. Os resultados PNG e WebP recebem cantos transparentes, e os resultados JPEG recebem BackgroundColor. Uma miniatura ao vivo do resultado, redonda para um círculo, fica ao lado do editor.
Amplie com os botões, a roda do mouse ou um gesto de pinça, de 0,5 a 16 vezes, e arraste a imagem para fora da caixa para deslocá-la. Gire à esquerda e à direita em 90 graus, nivele um horizonte com o controle Endireitar de -45 a 45 graus, inverta na horizontal ou na vertical, e Redefinir volta à imagem inteira.
Com Mode icmDocument o usuário arrasta 4 cantos até os cantos de uma página, de um recibo ou de um quadro branco, com uma lupa em 4 vezes o zoom. O resultado é o quadrilátero mapeado em um retângulo reto, com amostragem bilinear dos pixels originais. Não há detecção automática de bordas: o usuário posiciona os cantos.
Original, Tons de cinza, Preto e branco, um limiar adaptativo que lida com sombras, e Melhorar, um alongamento de contraste de cada canal de cor. DocumentFilter define o filtro inicial, e o usuário pode mudá-lo na barra de ferramentas.
Selecione um arquivo, solte-o, cole-o da área de transferência, ou tire uma foto com a câmera frontal ou traseira (FacingMode) em uma página segura. ImageURL carrega uma imagem inicial, como o avatar atual. A orientação EXIF de uma foto é aplicada, de modo que um retrato tirado com um celular fica em pé.
O resultado é sempre renderizado a partir dos pixels originais, mesmo quando uma imagem grande é editada a partir de uma cópia reduzida. OutputFormat seleciona JPEG, PNG ou WebP, OutputQuality a qualidade e OutputWidth, OutputHeight e MaxOutputSize o tamanho. O navegador codifica o resultado de novo, de modo que os dados EXIF e GPS da origem não estão nele.
Toda ação pode ser feita com o teclado: as setas movem a caixa de recorte ou o canto com foco em 1 pixel (Shift para 10), Alt+setas redimensionam a caixa, + e - dão zoom e R gira. A caixa de recorte e cada canto são controles deslizantes com um texto de valor, e uma região live educada anuncia o tamanho do recorte e o resultado de um salvamento. O recortador segue data-bs-theme="dark" e o movimento reduzido.
Os membros que você mais usa.
O servidor nunca confia no navegador. O tipo deve ser JPEG, PNG ou WebP e corresponder a OutputFormat, os dados são verificados contra MaxResultSize antes e depois da decodificação, os seus bytes mágicos devem ser os do tipo, e a largura e a altura lidas do cabeçalho devem ser iguais ao tamanho enviado dentro de MaxOutputSize. Cada número dos dados de recorte tem a faixa verificada, e o nome de origem perde as suas partes de caminho.
OnCrop(Sender, aInfo, aStream, aAccept, aErrorMessage) recebe as informações validadas e os bytes da imagem. Guarde a imagem você mesmo, altere a URL, ou defina aAccept como False com o seu próprio texto. Ele dispara na thread da requisição, onde sgcHTMLRequestSession fornece a sessão.
Com UploadFolder o servidor escolhe um nome único de 32 caracteres hexadecimais com a extensão do tipo, nunca o nome enviado, e grava o arquivo somente depois que a imagem é aceita. SavedFileName e URL, que é UploadURL mais esse nome, são preenchidos. O componente não serve a pasta: mapeie UploadURL para ela no seu servidor.
FieldName nomeia um input oculto que recebe o resultado como uma URL data:, de modo que um formulário ao redor o envia com os seus outros campos. TargetSelector atualiza todo elemento img correspondente, e o evento DOM sgc-image-cropped sobe após cada salvamento com a URL, a largura, a altura e o tipo. Sem um motor nem ActionURL, Salvar apenas aplica o resultado no navegador.
O leitor de cabeçalho do servidor é público, de modo que o seu próprio código pode verificar uma imagem com a mesma regra: sgcHTMLImageInfo(aStream, aType, aWidth, aHeight) lê o tipo e o tamanho de uma imagem PNG, JPEG ou WebP sem decodificá-la. No .NET é um método estático de sgcHTMLImageCropperHelpers.
window.sgcImageCropper oferece scan, instances, get, load, loadFile, setCrop, reset, result e save. O script inicializa todo recortador da página, também após uma inserção do htmx, e vários recortadores em uma página o compartilham.
Em uma view Razor o Tag Helper <sgc-image-cropper> renderiza o recortador, e Salvar envia ao endpoint de eventos de componentes de UseSgcHtml. Um valor que não está na lista do seu atributo lança uma InvalidOperationException quando a página é renderizada, e o MaxRequestBodySize do Kestrel ainda limita a requisição.
Demos\60.HTML\01.RunTime\33.ImageCropper é o sgc Profile Studio, um servidor na porta 8135 com três recortadores: um avatar circular salvo por OnCrop, um scanner de documentos com o filtro Preto e branco que guarda cada digitalização em UploadFolder, e uma capa de produto 16:9 enviada com o seu formulário por FieldName. As versões em design time, Lazarus e .NET a espelham.
| Experimente onlineVeja na demo Recorte de imagens, rodando ao vivo no servidor de demos da eSeGeCe. | Abrir | |
| Ajuda onlineReferência completa da API e guia de uso para este componente. | Abrir | |
| Componente File UploadUma zona de upload de arrastar e soltar que envia arquivos como multipart form data. | Abrir | |
| Componente Camera ScannerLeia códigos de barras e códigos QR com a câmera do dispositivo. | Abrir | |
| Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 80 componentes. | Abrir | |
| Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML. | Abrir | |
| PreçosLicenças Single, Team e Site com código-fonte completo. | Abrir |