1.0.0 • Published 4 years ago

@mcsoft/selector-imagen v1.0.0

Weekly downloads
1
License
MIT
Repository
gitlab
Last release
4 years ago

Selector de Imagen

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

Software Type Language Software License Version Downloads

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)

PropiedadTipoDescripción
eventoObtenerArchivoImagenFunctionEvento 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)

PropiedadTipoPredeterminadoDescripción
iconoImagenNoSeleccionadastring'far fa-image'Icono (FontAwesome) que se mostrará en la vista previa mientras no se haya seleccionado una imagen.
relacionAspectonumber1/1Relación de aspecto que tendra la sección del selector para recortar la imagen.
textoobjectObjeto con los textos personalizados del componente.
texto.seleccionaUnaImagenstring'Selecciona una imagen.'Mensaje que se mostrará en la vista previa mientras no se haya seleccionado una imagen.
urlImagenVistaPreviastringURL 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).