j-Preview

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Diese Komponente resiziert das Bild automatisch nach den Einstellungen und laden es in base64-Format auf den Server.

Antwort vom Server muss die URL des Bildes enthalten
Funktioniert mit dem Bootstrap Grid System
Drag-and-Drop-Unterstützung
Unterstützung für EXIF-Orientation

Pfad:

Der Wert/Reaktion (von der Aufgabe) wird als URL für die Vorstellung verwendet.

Konfiguration:

url {String} (IMPORTANT) upload URL, kann auch eine Methode enthalten (bedarf)
width {Number} eine Bildweite (erfordert)
height {Number} eine Bildhöhe (erfordert)
percentage {Number} resisiert ein Bild nach dem Prozentsatz (siehe width und height sind nicht erforderlich)
icon {String} (optional) die Etikett-Ikon ohne ti, (Default: null)
background {String} (optional) eine Hintergrundfarbe, es kann transparent sein (Default: white)
schema {String} vorbereitetes Objekt für die Sendung (Default: {file:base64,filename:filename}, base64 + filename ist ein Wert aus der Vorstellung)
quality {Number} JPEG Qualität (Default: 90)
customize {Boolean} reduziert das Bild auf die definierte Größe (Default: true)
preview {String} bereitet eine Wertevorsichts-URL vor (Default: null)
- Beispiele für value => '/download/' + value + '.jpg'
map {String} bereitet Reaktionswert auf einen Wert vor (Default: null)
- Beispiele für value => value.id
empty {String} eine Verbindung zum leeren Bild
keeporiginal {Boolean} behält das Originalbild bei, wenn die Abmessung mit der in der Konfiguration definierten Breite/Höhe übereinstimmt (Standard: false)
NEW output {String} Ausgabetyp base64 (Standard) oder file
NEW convert {String} ein Bildtyp jpg (Default) oder png
NEW exec {String} einen Weg zur Methode function(next(url)) (es verhindert den Datei-Upload-Dialog)
NEW center {Boolean} vereinigt das Bild und die Etikette mit dem Zentrum

Methoden:

component.reupload() erhebt einen aktuellen Bildwert als Basis64.

Verwenden Sie es mit <ui-component name="preview">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>