j-Preview

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Denna komponent återställer bilden automatiskt enligt inställningarna och laddar upp den till servern i base64-format.

Svar från servern behöver innehålla URL-adressen till bilden
Det fungerar med Bootstrap Grid System
drag och drop stöd
Stöd för EXIF-orientation

Vägen:

Värdet / svaret (från laddningen) kommer att användas som en URL för förhandsvisning.

Konfigurera:

url {String} (IMPORTANT) ladda upp URL, kan innehålla en metod också (krav)
width {Number} en bildbredd (kravad)
height {Number} en bildhöjd (kravad)
percentage {Number} återställer en bild enligt andelen (efter width och height krävs inte)
icon {String} (alternativ) etiketten utan ti, (default: null)
background {String} (alternativ) en bakgrundsfärg, det kan vara transparent (default: white)
schema {String} förberedd objekt för sändning (default: {file:base64,filename:filename}, base64 + filename är ett värde från förhandsvisning)
quality {Number} JPEG kvalitet (default: 90)
customize {Boolean} återställer bilden till den definierade storleken (default: true)
preview {String} förbereder en värdeövervakning URL (default: null)
- Exempel på value => '/download/' + value + '.jpg'
map {String} förbereder svarvärde till ett värde (default: null)
- Exempel på value => value.id
empty {String} en länk till den tomma bilden
keeporiginal {Boolean} håller den ursprungliga bilden om dimensionen är densamma som bredden/höjden definierad i konfigurationen (default: false)
NEW output {String} utgångstyp base64 (default) eller file
NEW convert {String} en bildtyp jpg (default) eller png
NEW exec {String} en väg till metoden function(next(url)) (det förhindrar dialog med filen)
NEW center {Boolean} anpassar bilden och etiketten till centrum

Metoder:

component.reupload() återlämnar det ett aktuellt bildvärde som en bas64.

Använd den med <ui-component name="preview">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>