Todos los componentes (244)

Recortar imagen

Gestión · ImageCropper · .amset-cropper

Qué es y cuándo usarlo

Recortar una imagen: una caja sobre la imagen que se mueve y cambia de tamaño, libre o con una proporción fija.

Cuándo usarlo

La foto de un producto, una portada o un avatar que tienen que salir con un encuadre y una proporción concretos.
Entrega el recorte en píxeles de la imagen original (x, y, width, height) por onChange: recortar de verdad, en el servidor o en un <canvas>, es cosa de la aplicación.
aspects son las proporciones que se ofrecen además de «Libre» (por defecto 1:1, 4:3 y 16:9); una lista vacía deja solo el recorte libre.
Si se sabe el tamaño original, naturalWidth y naturalHeight evitan esperar a que cargue la imagen.

Cuándo no

Ver una imagen ampliada: ImageViewer. Comparar dos: ImageCompare.

Teclado: la caja del recorte recibe el foco; las flechas la mueven y Mayúsculas con las flechas cambian su tamaño, de una centésima del ancho en una centésima.

Accesibilidad: la caja es un regulador con nombre que dice su tamaño y su posición en píxeles, y lleva la explicación de su teclado.

Aspecto fino: --amset-cropper-shade (lo que queda fuera del recorte), --amset-cropper-handle (la esquina) y --amset-cropper-max-height.

Cómo se ve

Libre1:14:316:9

Zoom: 100 %

Flechas para mover el recorte; Mayúsculas y flechas para cambiar su tamaño.

Mueve el recuadro para recortar.

<ImageCropper
  src={cartel}
  alt="Cartel de la colección de otoño"
  naturalWidth={640}
  naturalHeight={360}
  zoomable
  rotatable
  onChange={(zona) => guardarZona(zona)}
/>

Props

Se importa con import { ImageCropper } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`alt`obligatoria	`string`	Que se ve en la imagen. Obligatorio: nombra la imagen y el recorte.
`src`obligatoria	`string`	—
`aspects`	`readonly CropAspect[]`	Las proporciones que se ofrecen, ademas de «Libre». Una lista vacia deja solo el recorte libre, sin selector.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`crossOrigin`	`"anonymous" \| "use-credentials"`	Para leer la imagen de otro origen en el `<canvas>`: el servidor tiene que mandar `Access-Control-Allow-Origin`.
`defaultAspect`	`string`	—
`defaultValue`	`CropRect`	—
`naturalHeight`	`number`	—
`naturalWidth`	`number`	El tamaño original de la imagen, si se sabe. Si no, se lee al cargarla.
`onChange`	`(rect: CropRect) => void`	—
`onCrop`	`(result: CroppedImage) => void`	Se llama con la imagen YA recortada (un `Blob`) al pulsar «Recortar», que solo sale si se pasa esto. Recorta en el navegador con un `<canvas>`: la imagen tiene que ser del mismo origen o venir con permiso (`crossOrigin`).
`outputType`	`"image/png" \| "image/jpeg" \| "image/webp"`	El formato de la imagen recortada. Por defecto, `image/png`.
`quality`	`number`	La calidad de 0 a 1 de la imagen recortada, en los formatos que pierden calidad (`image/jpeg`, `image/webp`).
`rotatable`	`boolean`	Botones para girar la imagen un cuarto de vuelta a cada lado; el recorte se hace sobre la imagen ya girada. Por defecto, no.
`value`	`CropRect`	El recorte, en pixeles de la imagen original. Si se pasa, lo controla quien lo usa.
`zoomable`	`boolean`	Botones para acercar y alejar la imagen y recortar con mas precision (hasta 4 veces). Por defecto, no.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-cropper-shade`	`var(--amset-overlay)`
`--amset-cropper-handle`	`0.875rem`
`--amset-cropper-max-height`	`28rem`

Cómo se cambia

.amset-cropper {
  --amset-cropper-shade: ...;
  --amset-cropper-handle: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: