@mcsoft/selector-imagen

Selector de Imagen

Componente de React que permite seleccionar una imagen del disco duro y cortarla para después guardarla.

Instalación

npm install --save @mcsoft/selector-imagen

Uso

import McSelectorImagen from '@mcsoft/selector-imagen';

class Ejemplo extends Component {
  render () {
    return (
	  <McSelectorImagen
	  	eventoObtenerArchivoImagen={(archivoObjeto) => eventoObtenerArchivoImagen(archivoObjeto)}
	  />
    )
  }

  eventoObtenerArchivoImagen(archivoObjeto) {
	console.log('Archivo seleccionado: ', archivoObjeto);
  }

}

Props (Obligatorios)

Propiedad	Tipo	Descripción
eventoObtenerArchivoImagen	Function	Evento que se ejecuta cuando el archivo es seleccionado. eventoObtenerArchivoImagen(archivoObjeto: objeto) - archivoObjeto: objeto Objeto con la información del archivo seleccionado. - archivoObjeto.base64: string Archivo de imagen en formato base64. - archivoObjeto.dataUrl: string Archivo de imagen en formato DataURL. - archivoObjeto.extension: string Extensión del archivo. - archivoObjeto.nombre: string Nombre del archivo. - archivoObjeto.tamano: number Tamaño del archivo en bytes. - archivoObjeto.tipo: string Tipo de archivo (MIME TYPE).

Props (Opcionales)

Propiedad	Tipo	Predeterminado	Descripción
iconoImagenNoSeleccionada	string	'far fa-image'	Icono (FontAwesome) que se mostrará en la vista previa mientras no se haya seleccionado una imagen.
relacionAspecto	number	1/1	Relación de aspecto que tendra la sección del selector para recortar la imagen.
texto	object		Objeto con los textos personalizados del componente.
texto.seleccionaUnaImagen	string	'Selecciona una imagen.'	Mensaje que se mostrará en la vista previa mientras no se haya seleccionado una imagen.
urlImagenVistaPrevia	string		URL de la imagen que se mostrará como vista previa. Utilizado para mostrar la vista previa de una imagen que actualmente ya ha existe (Por ejemplo: Una foto de perfil).