j-Preview

Este componente cambia el tamaño de la imagen automáticamente según la configuración y la carga en el servidor en formato base64.

• la respuesta del servidor debe contener la dirección URL de la imagen
• funciona con el sistema Bootstrap Grid
• soporte para arrastrar y soltar
• admite orientación EXIF

Ruta:

El valor/respuesta (de la carga) se utilizará como dirección URL para la vista previa.

Configuración:

• url {String} (IMPORTANTE) URL de carga, también puede contener un método (obligatorio)
• width {Number} un ancho de imagen (obligatorio)
• height {Number} una altura de imagen (obligatorio)
• percentage {Number} cambia el tamaño de una imagen según el porcentaje (entonces width y height no son necesarios)
• icon {String} (opcional) el icono de etiqueta sin ti, (predeterminado: null)
• background {String} (opcional) un color de fondo, puede ser transparent (predeterminado: white)
• schema {String} objeto preparado para enviar (predeterminado: {file:base64,filename:filename}, base64 + filename es un valor de la vista previa)
• quality {Number} Calidad JPEG (predeterminado: 90)
• customize {Boolean} cambia el tamaño de la imagen al tamaño definido (predeterminado: true)
• preview {String} prepara una dirección URL de vista previa de valores (predeterminado: null)
  • ejemplo: value => '/download/' + value + '.jpg'
• map {String} prepara el valor de respuesta a un valor (predeterminado: null)
  • ejemplo: value => value.id
• empty {String} un enlace a la imagen vacía
• keeporiginal {Boolean} mantiene la imagen original si la dimensión es igual al ancho/alto definido en la configuración (predeterminado: false)
• NEW output {String} tipo de salida base64 (predeterminado) o file
• NEW convert {String} un tipo de imagen jpg (predeterminado) o png
• NEW exec {String} una ruta al método function(next(url)) (impide el diálogo de carga de archivos)
• NEW center {Boolean} alinea la imagen y la etiqueta al centro

Métodos:

• component.reupload() vuelve a cargar un valor de imagen actual como base64.

Úselo con <ui-component name="preview">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (la CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

<div style="padding:50px;max-width:300px">
	<ui-component name="preview" path="picture" config="width:300;height:200;url:POST /upload/;icon:folder">Preview</ui-component>
</div>

<script>
	var picture = '';
</script>