@guajiritos/image-picker 0.0.5 → 0.0.7

package/README.md

@@ -1,140 +1,140 @@
-# 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
-
-Using `npm`
-
-```sh
-npm i @guajiritos/image-picker --save
-```
-Using `yarn`
-
-```sh
-yarn add @guajiritos/image-picker
-```
-
-`Guajiritos Image Picker` require [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
-
-Using `npm`
-
-```sh
-npm i resize-observer --save
-```
-Using `yarn`
-
-```sh
-yarn 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.
+# Guachos Image Picker
+
+Angular library based on angular material components for the selection, edition and compression of images in png, jpeg, webp formats
+This library was generated with Angular CLI version 13.1.3, and support until angular version 10.0.2 to the latest version of angular.
+
+### Description
+
+In many projects it is of interest to upload and edit images, and sometimes we have to consult other programs for the compression of images and the change of format to improve the performance of the page. With `GuachosImagePicker` this is possible in real time with for each image that you want to upload.
+
+### Installation
+
+Using `npm`
+
+```sh
+npm i guachos-image-picker --save
+```
+Using `yarn`
+
+```sh
+yarn add guachos-image-picker
+```
+
+`GuachosImagePicker` requires [Angular Material](https://material.angular.io/guide/getting-started/).
+version 10.0.1 or higher
+
+```sh
+ng add @angular/material
+```
+
+Importing the BrowserAnimationsModule into your application enables Angular's animation system. Declining this will disable most of Angular Material's animations.
+
+### External Resource
+
+`GuachosImagePicker` use `resize-observer`, for the functionality of cropping images. The resize observer api is used
+the resize observer interface reports changes to the dimensions of an Element's content or border box, or the bounding box of an SVGElement.
+Install the package
+
+Using `npm`
+
+```sh
+npm i resize-observer --save
+```
+Using `yarn`
+
+```sh
+yarn add resize-observer
+```
+
+### Usages
+
+You must import the module `GuachosImagePicker` where you will use it and use the component
+
+```typescript
+import { GuachosImagePickerModule } from 'guachos-image-picker';
+
+@NgModule({
+  imports: [
+    GuachosImagePickerModule
+  ],
+})
+```
+
+In your component:
+
+```html
+<guachos-image-picker [_config]="imagePickerConf" ($imageChanged)="onImageChange($event)"></guachos-image-picker>
+```
+
+In .ts file
+
+```typescript
+export class ExampleComponent {
+  imagePickerConf: ImagePickerConf = {
+    borderRadius: '4px',
+    language: 'en',
+    width: '320px',
+    height: '240px',
+  };
+}
+```
+
+### Here is an example with different configurations
+
+```typescript
+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>Basic usage</h2>
+<guachos-image-picker [_config]="config1"></guachos-image-picker>
+<br />
+<h2>Custom config</h2>
+<guachos-image-picker [_config]="config2"></guachos-image-picker>
+<br />
+<h2>Initial Image</h2>
+<guachos-image-picker [_imageSrc]="initialImage" ($imageChanged)="onImageChanged($event)" [_config]="config3"> </guachos-image-picker>
+```
+
+### More about the component
+
+The `GuachosImagePicker` component has a setting to change the width and length of the loaded image. In addition to the language (only 'es' and 'en'). It also has an initial compression option that by default is true. The interface looks like this:
+
+```typescript
+export interface ImagePickerConf {
+  width?: string;
+  height?: string;
+  borderRadius?: string;
+  compressInitial?: boolean;
+  language?: string;
+}
+```
+
+### Editing panel
+
+Once you have selected an image, three buttons are enabled below the image:
+```text
+1- Load a new image.
+2- Open the editing panel.
+3- DOWNLOAD.
+```
+
+
+In the edit panel, you can change the quality ratio to compress the file size (in kb). Also changing width and height in px keeping aspect ratio or not, is selectable. You can change the image format as you wish, the options are 'png', 'webp','jpeg'. The 'Png' format is not affected by changing the quality ratio.
+