j-Preview

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Ten element automatycznie odtwarza obraz zgodnie z ustawieniami i przesyła go do serwera w formacie base64.

Odpowiedź z serwera musi zawierać adres URL do obrazu
Zastosowanie systemu Bootstrap Grid
Drog i drop wsparcie
Wsparcie orientacji EXIF

Droga:

Wartość/odpowiedź (z przesyłki) zostanie wykorzystana jako adres URL do przeglądu.

Konfiguracja:

url {String} (IMPORTANT) upload URL, może zawierać również metodę (wymagane)
width {Number} szerokość obrazu (wymagane)
height {Number} - wysokość obrazu (wymagana)
percentage {Number} odtwarza obraz według procentów (wtedy width i height nie są wymagane)
icon {String} (opcjonalnie) ikona etykiety bez ti, (default: null)
background {String} (opcjonalny) kolor tła, może być transparent (default: white)
Obiekt schema {String} przygotowany do wysyłki (default: {file:base64,filename:filename}, base64 + filename jest wartością z przeglądu)
Jakość quality {Number} JPEG (default: 90)
customize {Boolean} odtwarza obraz do określonego rozmiaru (default: true)
preview {String} przygotowuje adres URL wstępnego wyświetlania wartości (default: null)
- Przykład: value => '/download/' + value + '.jpg'
map {String} przygotowuje wartość odpowiedzi do wartości (default: null)
- Przykład: value => value.id
empty {String} link do pustego obrazu
keeporiginal {Boolean} zachowuje oryginalny obraz, jeśli rozmiar jest taki sam jak szerokość / wysokość zdefiniowana w konfiguracji (default: false)
NEW output {String} rodzaj wyjścia base64 (default) lub file
NEW convert {String} typ obrazu jpg (default) lub png
NEW exec {String} trasa do metody function(next(url)) (zabronione jest przesyłanie plików dialog)
NEW center {Boolean} dostosowuje obraz i etykietę do centrum

Metody:

component.reupload() ponownie pobiera aktualną wartość obrazu jako bazę64.

Użyj go z <ui-component name="preview">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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>