j-Preview

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

Tento komponent automaticky zmení veľkosť obrázka podľa nastavení a odošle ho na server vo formáte base64.

odpoveď zo servera musí obsahovať URL adresu na obrázok
pracuje s Bootstrap Grid System
podpora drag and drop
podporuje EXIF orientáciu

Cesta:

Hodnota/odpoveď (z nahrávania) sa použije ako adresa URL pre náhľad.

Konfigurácia:

URL na nahrávanie url {String} (IMPORTANT), môže obsahovať aj metódu (povinné)
width {Number} šírka obrazu (povinné)
height {Number} výška obrazu (povinné)
percentage {Number} zmení veľkosť obrázka podľa percenta (potom width a height nie sú potrebné)
icon {String} (voliteľné) ikona štítka bez ti, (predvolené: null)
background {String} (voliteľné) farba pozadia, môže to byť transparent (predvolené: white)
schema {String} pripravený objekt na odoslanie (predvolené: {file:base64,filename:filename}, base64 + filename je hodnota z náhľadu)
quality {Number} Kvalita JPEG (predvolená: 90)
customize {Boolean} zmení veľkosť obrázka na definovanú veľkosť (predvolené: true)
preview {String} pripraví adresu URL náhľadu hodnoty (predvolené: null)
- príklad: value => '/download/' + value + '.jpg'
map {String} pripraví hodnotu odpovede na hodnotu (predvolené: null)
- príklad: value => value.id
empty {String} odkaz na prázdny obrázok
keeporiginal {Boolean} zachová pôvodný obrázok, ak je rozmer rovnaký ako šírka/výška definovaná v konfigurácii (predvolené: false)
NEW output {String} typ výstupu base64 (predvolené) alebo file
NEW convert {String} typ obrázka jpg (predvolené) alebo png
NEW exec {String} cesta k metóde function(next(url)) (bráni dialógu nahrávania súboru)
NEW center {Boolean} zarovná obrázok a štítok na stred

Metódy:

component.reupload() znova nahrá aktuálnu hodnotu obrázka ako základnú64.

Použite ho so <ui-component name="preview">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

example.html

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