@guajiritos/image-picker 17.1.3 → 18.0.0

package/README.md

@@ -1,149 +1,149 @@
-# 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.
+# 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.