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). |