TsgcHTMLComponent_ImageCropper: un recortador de imágenes que se ejecuta en el navegador, para fotos de perfil y documentos escaneados. Los usuarios recortan, amplían, giran y voltean una foto, o marcan las 4 esquinas de una página para obtener un rectángulo recto, y el servidor comprueba el resultado antes de que tu código o el disco lo vean, en Delphi, C++ Builder y .NET.
Define la forma y el tamaño del resultado y renderízalo. El usuario selecciona, suelta o pega una imagen, o hace una foto, y la edita sin peticiones al servidor. Guardar renderiza el resultado a partir de los píxeles originales, lo codifica en el navegador como JPEG, PNG o WebP y lo envía a OnCrop, y UploadFolder conserva el archivo con un nombre único.
TsgcHTMLComponent_ImageCropper, con un modo foto y un modo documento
Una barra de herramientas, el editor y una vista previa en vivo, desde un script y CSS incrustados en el componente, sin biblioteca externa y sin CDN
Delphi, C++ Builder, .NET
Un recortador circular con un resultado JPEG de 512 x 512. El servidor comprueba la imagen, la escribe en una carpeta con un nombre único, y TargetSelector muestra el nuevo avatar en la página una vez guardado.
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/'; // asígnala a la carpeta de tu servidor
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 es UploadURL más el nombre único que recibe el archivo
StoreAvatarURL(CurrentUserID, aInfo.URL); // tu base de datos
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 del Tag Helper: el servidor ya comprobó la imagen
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);
}
// el mismo recortador en código, para un escáner de documentos
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 editor de fotos para avatares y portadas, y un escáner para páginas y recibos, en un solo componente.
Un rectángulo con 8 tiradores sobre la imagen: arrastra la caja para moverla y un tirador para cambiar su tamaño, nunca por debajo de MinCropSize píxeles del origen. AspectRatio bloquea la caja a una proporción como 16:9, y AspectRatios lista los valores predefinidos de la barra de herramientas, Libre, 1:1, 4:3, 3:4 y 16:9 por defecto.
CropShape icsCircle muestra una máscara redonda para avatares y bloquea la caja a 1:1. Los resultados PNG y WebP obtienen esquinas transparentes, y los resultados JPEG obtienen BackgroundColor. Una miniatura en vivo del resultado, redonda para un círculo, queda junto al editor.
Amplía con los botones, la rueda del ratón o un gesto de pellizco, de 0,5 a 16 veces, y arrastra la imagen fuera de la caja para desplazarla. Gira a izquierda y derecha 90 grados, nivela un horizonte con el control deslizante Enderezar de -45 a 45 grados, voltea horizontal o verticalmente, y Restablecer vuelve a la imagen completa.
Con Mode icmDocument el usuario arrastra 4 esquinas sobre las esquinas de una página, un recibo o una pizarra, con una lupa a 4 veces el zoom. El resultado es el cuadrilátero proyectado sobre un rectángulo recto, con muestreo bilineal de los píxeles originales. No hay detección automática de bordes: el usuario coloca las esquinas.
Original, Escala de grises, Blanco y negro, un umbral adaptativo que tolera las sombras, y Mejorar, un estiramiento de contraste de cada canal de color. DocumentFilter define el filtro inicial, y el usuario puede cambiarlo en la barra de herramientas.
Selecciona un archivo, suéltalo, pégalo desde el portapapeles, o haz una foto con la cámara frontal o trasera (FacingMode) en una página segura. ImageURL carga una imagen inicial, como el avatar actual. Se aplica la orientación EXIF de una foto, de modo que un retrato hecho con un móvil queda derecho.
El resultado siempre se renderiza a partir de los píxeles originales, incluso cuando una imagen grande se edita desde una copia reducida. OutputFormat selecciona JPEG, PNG o WebP, OutputQuality la calidad y OutputWidth, OutputHeight y MaxOutputSize el tamaño. El navegador vuelve a codificar el resultado, así que los datos EXIF y GPS del origen no están en él.
Cada acción se puede hacer con el teclado: las flechas mueven la caja de recorte o la esquina enfocada 1 píxel (Mayús para 10), Alt+flechas cambian el tamaño de la caja, + y - amplían y R gira. La caja de recorte y cada esquina son controles deslizantes con un texto de valor, y una región live cortés anuncia el tamaño del recorte y el resultado de un guardado. El recortador sigue el data-bs-theme="dark" y el movimiento reducido.
Los miembros que más vas a usar.
El servidor nunca confía en el navegador. El tipo debe ser JPEG, PNG o WebP y coincidir con OutputFormat, los datos se comprueban frente a MaxResultSize antes y después de decodificar, sus bytes mágicos deben ser los del tipo, y el ancho y el alto leídos de la cabecera deben igualar el tamaño enviado dentro de MaxOutputSize. Cada número de los datos de recorte se comprueba en su rango, y el nombre de origen pierde sus partes de ruta.
OnCrop(Sender, aInfo, aStream, aAccept, aErrorMessage) recibe la información validada y los bytes de la imagen. Guarda tú la imagen, cambia la URL o define aAccept como False con tu propio texto. Se dispara en el hilo de la petición, donde sgcHTMLRequestSession da la sesión.
Con UploadFolder el servidor elige un nombre único de 32 caracteres hexadecimales con la extensión del tipo, nunca el nombre enviado, y escribe el archivo solo después de aceptar la imagen. Se rellenan SavedFileName y URL, que es UploadURL más ese nombre. El componente no sirve la carpeta: asigna UploadURL a ella en tu servidor.
FieldName nombra un input oculto que recibe el resultado como una URL data:, de modo que un formulario que lo contiene lo envía con sus otros campos. TargetSelector actualiza cada elemento img coincidente, y el evento DOM sgc-image-cropped se propaga tras cada guardado con la URL, el ancho, el alto y el tipo. Sin motor ni ActionURL, Guardar solo aplica el resultado en el navegador.
El lector de cabeceras del servidor es público, así que tu propio código puede comprobar una imagen con la misma regla: sgcHTMLImageInfo(aStream, aType, aWidth, aHeight) lee el tipo y el tamaño de una imagen PNG, JPEG o WebP sin decodificarla. En .NET es un método estático de sgcHTMLImageCropperHelpers.
window.sgcImageCropper ofrece scan, instances, get, load, loadFile, setCrop, reset, result y save. El script inicializa cada recortador de la página, también tras un intercambio de htmx, y varios recortadores en una página lo comparten.
En una vista Razor el Tag Helper <sgc-image-cropper> renderiza el recortador, y Guardar envía al endpoint de eventos de componentes de UseSgcHtml. Un valor que no está en la lista de su atributo lanza una InvalidOperationException cuando se renderiza la página, y el MaxRequestBodySize de Kestrel sigue limitando la petición.
Demos\60.HTML\01.RunTime\33.ImageCropper es sgc Profile Studio, un servidor en el puerto 8135 con tres recortadores: un avatar circular guardado mediante OnCrop, un escáner de documentos con el filtro Blanco y negro que conserva cada escaneo en UploadFolder, y una portada de producto 16:9 enviada con su formulario mediante FieldName. Las versiones de tiempo de diseño, Lazarus y .NET lo replican.
| Pruébalo en líneaMíralo en la demo Recorte de imágenes, funcionando en vivo en el servidor de demos de eSeGeCe. | Abrir | |
| Ayuda en líneaReferencia completa de la API y guía de uso para este componente. | Abrir | |
| Componente FileUploadUna zona de subida de arrastrar y soltar que envía archivos como datos de formulario multipart. | Abrir | |
| Componente CameraScannerEscanea códigos de barras y códigos QR con la cámara del dispositivo. | Abrir | |
| Todos los componentes de sgcHTMLExplora la matriz de características completa de más de 80 componentes. | Abrir | |
| Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML. | Abrir | |
| PreciosLicencias Single, Team y Site con todo el código fuente. | Abrir |