npm package: @guajiritos/image-picker
Description: Biblioteca de angular basada en componentes de material angular para la selección, edición y compresión de imágenes en formatos png, jpeg, webp
Author: Guajiritos SRL
Latest version: 19.0.5

# Guajiritos Image Picker

Biblioteca angular basada en componentes de material angular para la selección, edición y compresión de imágenes en formatos png, jpeg, webp.

### Description

En muchos proyectos interesa subir y editar imágenes, y en ocasiones tenemos que consultar otros programas para la compresión de imágenes y el cambio de formato para mejorar el rendimiento de la página. Con `Guajiritos Image Picker` esto es posible en tiempo real con cada imagen que quieras subir.

### Installation

Con `npm`

```sh
npm i @guajiritos/image-picker --save
```
Con `yarn`

```sh
yarn add @guajiritos/image-picker
```

Con `pnpm`

```sh
pnpm add @guajiritos/image-picker
```

`Guajiritos Image Picker` requiere [Angular Material](https://material.angular.io/guide/getting-started/).

```sh
ng add @angular/material
```

La importación de `BrowserAnimationsModule` a su aplicación habilita el sistema de animación de Angular. Rechazar esto deshabilitará la mayoría de las animaciones de Angular Material.
### External Resource

`Guajiritos Image Picker` usa `resize-observer`, para la funcionalidad de recortar imágenes. Se utiliza la API de observador de cambio de tamaño
la interfaz de cambio de tamaño del observador informa de los cambios en las dimensiones del contenido de un Elemento o del cuadro de borde, o del cuadro delimitador de un SVGElement.

Instala la librería

Con `npm`

```sh
npm i resize-observer --save
```
Con `yarn`

```sh
yarn add resize-observer
```

Con `pnpm`

```sh
pnpm add resize-observer
```

### Usages

Debes importar el módulo `Guajiritos Image Picker` donde lo usarás y usar el componente.

```ts
import { GuajiritosImagePicker } from '@guajiritos/image-picker';

@NgModule({
  imports: [
    GuajiritosImagePicker
  ]
})
```

In your component:

```html
<guajiritos-image-picker [_config]="imagePickerConf" ($imageChanged)="onImageChange($event)"></guajiritos-image-picker>
```

En el componente .ts

```ts
export class ExampleComponent {
  imagePickerConf: ImagePickerConf = {
    borderRadius: '4px',
    language: 'en',
    width: '320px',
    height: '240px',
  };
}
```

### Aquí hay un ejemplo con diferentes configuraciones.

```ts
export class ExampleComponent {
  config1: ImagePickerConf = {
    borderRadius: '16px',
    language: 'en',
  };
  config2: ImagePickerConf = {
    borderRadius: '50%',
    language: 'es',
    width: '200px',
    height: '200px',
  };
  config3: ImagePickerConf = {
    borderRadius: '4px',
    language: 'en',
  };
  initialImage = 'https://havanatursa.com/assets/images/multi-agencies/backgrounds/slider.jpg';
}
```

```html
<h2>Uso básico</h2>
<guajiritos-image-picker [_config]="config1"></guajiritos-image-picker>
<br />
<h2>Configuración personalizada</h2>
<guajiritos-image-picker [_config]="config2"></guajiritos-image-picker>
<br />
<h2>Imagen inicial</h2>
<guajiritos-image-picker [_imageSrc]="initialImage" ($imageChanged)="onImageChanged($event)" [_config]="config3"></guajiritos-image-picker>
```

### Más sobre el componente

El componente `Guajiritos Image Picker` tiene una configuración para cambiar el ancho y largo de la imagen cargada. Además del idioma (solo 'es' y 'en'). También tiene una opción de compresión inicial que por defecto es true. La interfaz se ve así:

```ts
export interface ImagePickerConf {
  width?: string;
  height?: string;
  borderRadius?: string;
  compressInitial?: boolean;
  language?: string;
}
```

### Panel de edición

Una vez que haya seleccionado una imagen, se habilitarán tres botones debajo de la imagen:

```text
1- Cargar una nueva imagen.
2- Abrir el panel de edición.
3- Descargar la imagen.
```

En el panel de edición, puede cambiar la relación de calidad para comprimir el tamaño del archivo (en kb). También se puede seleccionar el cambio de ancho y alto en px manteniendo la relación de aspecto o no. Puede cambiar el formato de la imagen como desee, las opciones son 'png', 'webp', 'jpeg'. El formato 'Png' no se ve afectado por cambiar la relación de calidad.