j-Preview

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Ce composant réaffiche automatiquement l'image selon les paramètres et le télécharge au serveur dans le format base64.

La réponse du serveur doit contenir l'URL de l'image
fonctionne avec le système Bootstrap Grid
Le support de drag et drop
L’orientation EXIF

Le chemin:

La valeur/respons (de l’envoi) sera utilisée comme une URL pour la prévision.

Configuration :

url {String} (IMPORTANT) URL de téléchargement, peut contenir une méthode aussi (require)
width {Number} une largeur d'image (exigeant)
height {Number} : hauteur d’image (exigeant)
percentage {Number} récite une image en fonction du pourcentage (tandis que width et height ne sont pas nécessaires)
icon {String} (optionnel) l'icône d'étiquette sans ti, (defaut: null)
background {String} (optional) une couleur de fond, il peut être transparent (defaut: white)
schema {String} objet préparé pour l'envoi (defaut: {file:base64,filename:filename}, base64 + filename est une valeur de prévision)
La qualité du quality {Number} JPEG (defaut : 90)
customize {Boolean} récite l'image à la taille définie (defaut: true)
preview {String} prépare une URL de prévision (defaut: null)
- Exemple : value => '/download/' + value + '.jpg'
map {String} prépare la valeur de réponse à une valeur (defaut: null)
- Exemple : value => value.id
empty {String} : un lien vers l’image vide
keeporiginal {Boolean} maintient l'image originale si la dimension est la même que la largeur/altitude définie dans la configuration (defaut: false)
NOUVEAU output {String} type de sortie base64 (par défaut) ou file
NEW convert {String} un type d'image jpg (défaut) ou png
NEW exec {String} un chemin vers la méthode function(next(url)) (il empêche le dialogue de téléchargement des fichiers)
NEW center {Boolean} ajuste l'image et l'étiquette au centre

Méthodes :

component.reupload() recharge une valeur d'image actuelle en tant que base64.

Utilisez-le avec <ui-component name="preview">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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>