@guajiritos/image-picker 0.0.5 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +140 -140
- package/esm2020/lib/guachos-image-picker.component.mjs +5 -5
- package/esm2020/public-api.mjs +1 -1
- package/esm2020/utils/calculate-size.module.mjs +4 -4
- package/esm2020/utils/calculate-size.pipe.mjs +3 -3
- package/fesm2015/guajiritos-image-picker.mjs +11 -11
- package/fesm2015/guajiritos-image-picker.mjs.map +1 -1
- package/fesm2020/guajiritos-image-picker.mjs +11 -11
- package/fesm2020/guajiritos-image-picker.mjs.map +1 -1
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -1,140 +1,140 @@
|
|
|
1
|
-
# Guajiritos Image Picker
|
|
2
|
-
|
|
3
|
-
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.
|
|
4
|
-
|
|
5
|
-
### Description
|
|
6
|
-
|
|
7
|
-
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.
|
|
8
|
-
|
|
9
|
-
### Installation
|
|
10
|
-
|
|
11
|
-
Using `npm`
|
|
12
|
-
|
|
13
|
-
```sh
|
|
14
|
-
npm i @guajiritos/image-picker --save
|
|
15
|
-
```
|
|
16
|
-
Using `yarn`
|
|
17
|
-
|
|
18
|
-
```sh
|
|
19
|
-
yarn add @guajiritos/image-picker
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
`Guajiritos Image Picker` require [Angular Material](https://material.angular.io/guide/getting-started/).
|
|
23
|
-
|
|
24
|
-
```sh
|
|
25
|
-
ng add @angular/material
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
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.
|
|
29
|
-
### External Resource
|
|
30
|
-
|
|
31
|
-
`Guajiritos Image Picker` usa `resize-observer`, para la funcionalidad de recortar imágenes. Se utiliza la API de observador de cambio de tamaño
|
|
32
|
-
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.
|
|
33
|
-
|
|
34
|
-
Instala la librería
|
|
35
|
-
|
|
36
|
-
Using `npm`
|
|
37
|
-
|
|
38
|
-
```sh
|
|
39
|
-
npm i resize-observer --save
|
|
40
|
-
```
|
|
41
|
-
Using `yarn`
|
|
42
|
-
|
|
43
|
-
```sh
|
|
44
|
-
yarn add resize-observer
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
### Usages
|
|
48
|
-
|
|
49
|
-
Debes importar el módulo `Guajiritos Image Picker` donde lo usarás y usar el componente.
|
|
50
|
-
|
|
51
|
-
```ts
|
|
52
|
-
import { GuajiritosImagePicker } from '@guajiritos/image-picker';
|
|
53
|
-
|
|
54
|
-
@NgModule({
|
|
55
|
-
...
|
|
56
|
-
imports: [
|
|
57
|
-
...
|
|
58
|
-
GuajiritosImagePicker,
|
|
59
|
-
...
|
|
60
|
-
]
|
|
61
|
-
})
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
In your component:
|
|
65
|
-
|
|
66
|
-
```html
|
|
67
|
-
<guajiritos-image-picker [_config]="imagePickerConf" ($imageChanged)="onImageChange($event)"></guajiritos-image-picker>
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
En el componente .ts
|
|
71
|
-
|
|
72
|
-
```ts
|
|
73
|
-
export class ExampleComponent {
|
|
74
|
-
imagePickerConf: ImagePickerConf = {
|
|
75
|
-
borderRadius: '4px',
|
|
76
|
-
language: 'en',
|
|
77
|
-
width: '320px',
|
|
78
|
-
height: '240px',
|
|
79
|
-
};
|
|
80
|
-
}
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
### Aquí hay un ejemplo con diferentes configuraciones.
|
|
84
|
-
|
|
85
|
-
```ts
|
|
86
|
-
export class ExampleComponent {
|
|
87
|
-
config1: ImagePickerConf = {
|
|
88
|
-
borderRadius: '16px',
|
|
89
|
-
language: 'en',
|
|
90
|
-
};
|
|
91
|
-
config2: ImagePickerConf = {
|
|
92
|
-
borderRadius: '50%',
|
|
93
|
-
language: 'es',
|
|
94
|
-
width: '200px',
|
|
95
|
-
height: '200px',
|
|
96
|
-
};
|
|
97
|
-
config3: ImagePickerConf = {
|
|
98
|
-
borderRadius: '4px',
|
|
99
|
-
language: 'en',
|
|
100
|
-
};
|
|
101
|
-
initialImage = 'https://havanatursa.com/assets/images/multi-agencies/backgrounds/slider.jpg';
|
|
102
|
-
}
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
```html
|
|
106
|
-
<h2>Uso básico</h2>
|
|
107
|
-
<guajiritos-image-picker [_config]="config1"></guajiritos-image-picker>
|
|
108
|
-
<br />
|
|
109
|
-
<h2>Configuración personalizada</h2>
|
|
110
|
-
<guajiritos-image-picker [_config]="config2"></guajiritos-image-picker>
|
|
111
|
-
<br />
|
|
112
|
-
<h2>Imagen inicial</h2>
|
|
113
|
-
<guajiritos-image-picker [_imageSrc]="initialImage" ($imageChanged)="onImageChanged($event)" [_config]="config3"></guajiritos-image-picker>
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
### Más sobre el componente
|
|
117
|
-
|
|
118
|
-
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í:
|
|
119
|
-
|
|
120
|
-
```ts
|
|
121
|
-
export interface ImagePickerConf {
|
|
122
|
-
width?: string;
|
|
123
|
-
height?: string;
|
|
124
|
-
borderRadius?: string;
|
|
125
|
-
compressInitial?: boolean;
|
|
126
|
-
language?: string;
|
|
127
|
-
}
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
### Panel de edición
|
|
131
|
-
|
|
132
|
-
Una vez que haya seleccionado una imagen, se habilitarán tres botones debajo de la imagen:
|
|
133
|
-
|
|
134
|
-
```text
|
|
135
|
-
1- Cargar una nueva imagen.
|
|
136
|
-
2- Abrir el panel de edición.
|
|
137
|
-
3- Descargar la imagen.
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
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.
|
|
1
|
+
# Guajiritos Image Picker
|
|
2
|
+
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
### Description
|
|
6
|
+
|
|
7
|
+
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.
|
|
8
|
+
|
|
9
|
+
### Installation
|
|
10
|
+
|
|
11
|
+
Using `npm`
|
|
12
|
+
|
|
13
|
+
```sh
|
|
14
|
+
npm i @guajiritos/image-picker --save
|
|
15
|
+
```
|
|
16
|
+
Using `yarn`
|
|
17
|
+
|
|
18
|
+
```sh
|
|
19
|
+
yarn add @guajiritos/image-picker
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
`Guajiritos Image Picker` require [Angular Material](https://material.angular.io/guide/getting-started/).
|
|
23
|
+
|
|
24
|
+
```sh
|
|
25
|
+
ng add @angular/material
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
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.
|
|
29
|
+
### External Resource
|
|
30
|
+
|
|
31
|
+
`Guajiritos Image Picker` usa `resize-observer`, para la funcionalidad de recortar imágenes. Se utiliza la API de observador de cambio de tamaño
|
|
32
|
+
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.
|
|
33
|
+
|
|
34
|
+
Instala la librería
|
|
35
|
+
|
|
36
|
+
Using `npm`
|
|
37
|
+
|
|
38
|
+
```sh
|
|
39
|
+
npm i resize-observer --save
|
|
40
|
+
```
|
|
41
|
+
Using `yarn`
|
|
42
|
+
|
|
43
|
+
```sh
|
|
44
|
+
yarn add resize-observer
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Usages
|
|
48
|
+
|
|
49
|
+
Debes importar el módulo `Guajiritos Image Picker` donde lo usarás y usar el componente.
|
|
50
|
+
|
|
51
|
+
```ts
|
|
52
|
+
import { GuajiritosImagePicker } from '@guajiritos/image-picker';
|
|
53
|
+
|
|
54
|
+
@NgModule({
|
|
55
|
+
...
|
|
56
|
+
imports: [
|
|
57
|
+
...
|
|
58
|
+
GuajiritosImagePicker,
|
|
59
|
+
...
|
|
60
|
+
]
|
|
61
|
+
})
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
In your component:
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<guajiritos-image-picker [_config]="imagePickerConf" ($imageChanged)="onImageChange($event)"></guajiritos-image-picker>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
En el componente .ts
|
|
71
|
+
|
|
72
|
+
```ts
|
|
73
|
+
export class ExampleComponent {
|
|
74
|
+
imagePickerConf: ImagePickerConf = {
|
|
75
|
+
borderRadius: '4px',
|
|
76
|
+
language: 'en',
|
|
77
|
+
width: '320px',
|
|
78
|
+
height: '240px',
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### Aquí hay un ejemplo con diferentes configuraciones.
|
|
84
|
+
|
|
85
|
+
```ts
|
|
86
|
+
export class ExampleComponent {
|
|
87
|
+
config1: ImagePickerConf = {
|
|
88
|
+
borderRadius: '16px',
|
|
89
|
+
language: 'en',
|
|
90
|
+
};
|
|
91
|
+
config2: ImagePickerConf = {
|
|
92
|
+
borderRadius: '50%',
|
|
93
|
+
language: 'es',
|
|
94
|
+
width: '200px',
|
|
95
|
+
height: '200px',
|
|
96
|
+
};
|
|
97
|
+
config3: ImagePickerConf = {
|
|
98
|
+
borderRadius: '4px',
|
|
99
|
+
language: 'en',
|
|
100
|
+
};
|
|
101
|
+
initialImage = 'https://havanatursa.com/assets/images/multi-agencies/backgrounds/slider.jpg';
|
|
102
|
+
}
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
```html
|
|
106
|
+
<h2>Uso básico</h2>
|
|
107
|
+
<guajiritos-image-picker [_config]="config1"></guajiritos-image-picker>
|
|
108
|
+
<br />
|
|
109
|
+
<h2>Configuración personalizada</h2>
|
|
110
|
+
<guajiritos-image-picker [_config]="config2"></guajiritos-image-picker>
|
|
111
|
+
<br />
|
|
112
|
+
<h2>Imagen inicial</h2>
|
|
113
|
+
<guajiritos-image-picker [_imageSrc]="initialImage" ($imageChanged)="onImageChanged($event)" [_config]="config3"></guajiritos-image-picker>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### Más sobre el componente
|
|
117
|
+
|
|
118
|
+
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í:
|
|
119
|
+
|
|
120
|
+
```ts
|
|
121
|
+
export interface ImagePickerConf {
|
|
122
|
+
width?: string;
|
|
123
|
+
height?: string;
|
|
124
|
+
borderRadius?: string;
|
|
125
|
+
compressInitial?: boolean;
|
|
126
|
+
language?: string;
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### Panel de edición
|
|
131
|
+
|
|
132
|
+
Una vez que haya seleccionado una imagen, se habilitarán tres botones debajo de la imagen:
|
|
133
|
+
|
|
134
|
+
```text
|
|
135
|
+
1- Cargar una nueva imagen.
|
|
136
|
+
2- Abrir el panel de edición.
|
|
137
|
+
3- Descargar la imagen.
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
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.
|