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

npm i @guajiritos/image-picker --save

Con yarn

yarn add @guajiritos/image-picker

Con pnpm

pnpm add @guajiritos/image-picker

Guajiritos Image Picker requiere Angular Material.

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

npm i resize-observer --save

Con yarn

yarn add resize-observer

Con pnpm

pnpm add resize-observer

Usages

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

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

@NgModule({
  imports: [
    GuajiritosImagePicker
  ]
})

In your component:

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

En el componente .ts

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

Aquí hay un ejemplo con diferentes configuraciones.

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';
}

<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í:

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:

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.