Durchsuchbare Dokumentation aufrufen
Zurück zur Dokumentationsübersicht
JavaScript-Bibliothek preview/objects
Diese Bibliothek bietet Funktionen, um:
- per Overlay-Objekt einen Stempel oder eine Notiz auf ein Preview-Image zu setzen
- Preview-Images zu holen und zu erstellen
Ein Overlay ist ein Objekt, mit dem Sie eine Notiz oder einen Stempel (eine Grafik) als Bemerkung (Annotation) an einer bestimmten Position (Seite und x- sowie y-Koordinaten auf der Seite) auf ein Dokument setzen können. Die Position wird in Pixeln, bezogen auf das Preview, angegeben.
Ein Preview-Image ist die grafische Darstellung einer Seite eines Dokuments. Ein Preview-Image wird unterschieden in:
- Master-Image
- Thumbnail-Images
Das Master-Image hat die Größe der Dokumentseite, die es repräsentiert.
Das Thumbnail-Image ist kleiner, damit es etwa innerhalb einer Liste schnell angezeigt werden kann.
Verwendung
Diese Bibliothek binden Sie stets am Anfang eines Skripts ein:
let previewobjects = require('preview/objects');
Funktionen
create
overlay
Legt ein neues Overlay-Objekt an und verknüpfen dieses mit dem richtigen Preview des Objekts.
Das Objekt kann eine Notiz oder eine Grafik (Stempel) sein, die auf ein Dokument gesetzt wird.
let overlay = previewobjects.create('overlay', data);
data
data = {
// mandatory parameters
x: 0, // x coordinate in "value parameter coordinates",
// beginning from top left
y: 0, // y coordinate in "value parameter coordinates",
// beginning from top left
page: 1, // page, starting with 1
target: 'id-or-path-to-document', // the document, to that the overlay should be added
text: 'Text of note', // text of the overlay (optional, when image is set)
image: 'id-or-path-to-image', // image of the (optional, when text is set), could be png or jpg
// optional parameters
coordinates: 'px', // coordinates x and y
// 'px' in pixel
// '%' in percent (0 - 1) e.g: 0.22343
// Default: 'px'
width: 100, // optional width in pixels or percent
// (if not set, it is done automatically, depending on the text)
// 0 <= width <= 1 ==> in percent
// width > 1 ==> in pixel
height: 100, // optional height in pixels or percent
// (if not set, it is done automatically, depending on the text)
// 0 <= height <= 1 ==> in percent
// height > 1 ==> in pixel
depth: 0, // depth, default is 0. If there are several notes overlapping.
// the higher the depth, the more top is the note
background: '#FFFF00', // background color with HEX RGB
}
Beispiel
Das folgende Beispiel zeigt eine Notiz, die als Annotation auf ein Dokument aufgebracht wird:
let previewobjects = require('preview/objects');
overlay = previewobjects.create('overlay', {
target: doc, // agorum core Dokument-Object
x: 200 ,
y: 200 ,
text: 'Hier steht meine erste Notiz\n, die per JavaScript als Annotation\ngesetzt wird',
page: 1,
});
Nachfolgend die RGB-Werte für die im Standard angebotene Notiz, die in 24 unterschiedlichen Hintergründen als Annotation gesetzt werden kann. Mit dem kleinen Programm im Folgenden können Sie diese auf ein Dokument setzen, sodass Sie sehen, wie diese aussehen:
let std = [
{
background : '#ff0000',
text : 'rot (1)'
}, {
background : '#ff9900',
text : 'Orange (2)'
}, {
background : '#99cc00',
text : 'gr\u00FCn (3)'
}, {
background : '#339966',
text : 'gr\u00FCn (4)'
}, {
background : '#33cccc',
text : 'Blau (5)'
}, {
background : '#3366ff',
text : 'Blau (6)'
}, {
background : '#800080',
text : 'rot (7)'
}, {
background : '#969696',
text : 'grau (8)'
}, {
background : '#ff00ff',
text : 'Lila (9)'
}, {
background : '#ffcc00',
text : 'Orange (10)'
}, {
background : '#ffff00',
text : 'Gelb (11)'
}, {
background : '#00ff00',
text : 'Gr\u00FCn (12)'
}, {
background : '#00ffff',
text : 'Balu (13)'
}, {
background : '#00ccff',
text : 'Blau (14)'
}, {
background : '#993366',
text : 'Rot (15)'
}, {
background : '#c0c0c0',
text : 'Grau (16)'
}, {
background : '#ff99cc',
text : 'Lila (17)'
}, {
background : '#ffcc00',
text : 'Orange (18)'
}, {
background : '#ffff99',
text : 'Gelb (19)'
}, {
background : '#ccffcc',
text : 'Blau (20)'
}, {
background : '#99ccff',
text : 'Blau (21)'
}, {
background : '#cc99ff',
text : 'Blau (23)'
}, {
background : '#ffffff',
text : 'Weis (24)'
}
];
let start = 100;
let counter = 0;
std.forEach(std => {
previewobjects.create('overlay', {
target: doc,
x: 20,
y: start,
width: 300,
background: std.background,
text: std.text,
page: 1,
});
start += 120;
});
Ergebnis
Beispiel für einen Stempel
Ein Stempel ist eine Grafik als png- oder als jpg-Datei:
overlay = previewobjects.create('overlay', {
target: doc,
x: 100,
y: 100,
width: 1200,
image: objects.find('/agorum/roi/customers/agorum.test.preview.objects/test-daten/agorum_logo_dark_mode_komplett_claim.png'),
page: 1,
});
Ergebnis
Auf dem Dokument ist jetzt oben links das agorum-Logo zu sehen:
update
overlay
Ändert ein Overlay-Object.
previewobjects.update('overlay', object, data);
data
data = {
// optional parameters
x: 0, // x coordinate in "value parameter coordinates",
// beginning from top left
y: 0, // y coordinate in "value parameter coordinates",
// beginning from top left
coordinates: 'px' // coordinates x and y
// 'px' in pixel
// '%' in percent (0 - 1) e.g: 0.22343
// Default: 'px'
page: 1, // page, starting with 1
width: 100, // optional width in pixels or %
// (if not set, it is done automatically, depending on the text)
// 0 <= width <= 1 ==> in percent
// width > 1 ==> in pixel
height: 100, // optional height in pixels or %
// (if not set, it is done automatically, depending on the text)
// 0 <= height <= 1 ==> in percent
// height > 1 ==> in pixel
depth: 0, // depth, default is 0. If there are several notes overlapping.
// the higher the depth, the more top is the note
background: '#FFFF00', // background color with HEX RGB
text: 'Text of note', // text of the note,
image: 'id-or-path-to-image', // image of the (optional, when text is set), could be png or jpg
}
Beispiel
previewobjects.update('overlay', object, {
text: 'Das ist der neue Text vom Overlay'
});
load
overlay
Holt alle Overlays, die auf einem Dokument sitzen.
let overlays = previewobjects.load('overlay', object [, filter ]);
object
object = <agorum core object> von dem Sie die Overlays holen
filter (optional)
Schränkt auf bestimmte Overlays ein.
filter = {
type: // Optional 'txt' or 'jpg' or 'png'
page: // Optional 1 od 2 ... or n
}
Ergebnis
Sie erhalten ein Array von Overlay-Objekten mit folgendem Aufbau:
let overlays = [
{
overlay: overlay // agorum core Overlay-Object
name: // name from tghe Overlay
x: 0, // x coordinate in pixels, beginning from top left
y: 0, // y coordinate in pixels, beginning from top left
page: 1, // page, starting with 1
width: 100, // width in pixels
height: 100, // optional height
depth: 0, // depth. If there are several notes overlapping.
// the higher the depth, the more top is the note
background: '#FFFF00', // background color with HEX RGB
text: 'Text of note', // text of the note
},
..
..
]
Beispiele
Alle Overlays holen
let overlays = previewobjects.load('overlay', object);
Nur die Overlays von Seite 1 holen
let overlays = previewobjects.load('overlay', object, {page: 1});
Nur txt-Overlays holen
let overlays = previewobjects.load('overlay', object, {type: 'txt'});
Nur image-png-Overlays von Seite 1 holen
let overlays = previewobjects.load('overlay', object, {page: 1, type: 'png'});
image
Holt ein Preview-Image.
Wenn das Image nicht vorhanden ist, wird es den übergebenen Parametern entsprechend erstellt.
Aufruf
let imageData = previewobjects.load('image', object, data);
object
Object ist das Dokument, von dem das Image geholt wird.
data
Mit data übergeben Sie Parameter, die definieren, welches Image Sie holen wollen.
data = {
width: -1, // Width in pixels
// x > 0 width in pixels, if height is set to -1, height is calculated
// If height is also set, the image can be distorted
// Default: -1 = is not considered
height: -1, // Height in pixels
// x > 0 height in pixels, if width is set to -1, width is calculated
// If width is also set, the image can be distorted
// Default: -1 = is not considered
size: -1, // Specified in pixels. Refers to the longer edge,
// the shorter edge is then calculated automatically
// Default: -1 = is not considered
// Rule for width, height, size:
// If width or height are set, no size may be set
// If size is set, no width or height may be set
//
// MasterImage: A MasterImage is an image with the original height and width of the
// document page
// if width, height and size are not assigned or
// are each assigned with -1, a MasterImage is created
page: 1 // page of the document, always start at 1
// Default: 1
// If the page does not exist an exception is thrown
cached: true, // Specifies whether the image is cached.
// true = is stored as object
// false = is not stored as object
// Default: true
readOnly:true, // Specifies whether the set expiration date is increased for each viewing
// This means that the image is only deleted when it is no longer viewed
// This only has an effect if it is entered in the MetaDb that a expiration date is set.
// The default value is recommended here
// true = ExpirationDate is NOT increased when the image is viewed.
// false = Expiration date is increased with each viewing.
// Default: true
onlyCreated: true // Here you can control that the image is only fetched if it is already is created.
// true = The image is only fetched if it is already created. If the image is not
// created, an exception is thrown
// false = The image is always fetched, if it is not available, it is created
// Default: false
}
Ergebnis
imageData = {
count: 8, // Count, how many images are there in total
stream: { }, // contentStream of the image
contentSize: 127861, // contentSize of the image in bytes
masterWidth: 1240, // Width of the MasterImage in pixels
masterHeight: 1754, // Height of the MasterImage in pixel
width: 1240, // Width of this image
height: 1754 // Height of this image
};
Beispiele
MasterImage von Seite 1 holen
let imageData = previewobjects.load('image', object, { page: 1 });
Wenn das Image nicht vorhanden ist, wird es erzeugt und zurückgegeben.
Thumbnail von Seite 1 holen
let imageData = previewobjects.load('image', object, { page: 1, size: 32, cached: false });
Die lange Seite hat 32 Pixel, das image wird nicht gespeichert.
Wenn das Image nicht vorhanden ist, wird es erzeugt und zurückgegeben.
deleteAll
Löscht für das übergebene Objekt alle bisher erzeugten Vorschaubilder.
Aufruf
previewobjects.deleteAll(object);
delete
Prüft, ob es sich bei dem Dokument um ein Overlay-Objekt handelt und löscht das angegebene Overlay-Objekt.
Aufruf
previewobjects.delete(object);
Beispiel
Das folgende Skript holt alle Overlay-Objekte und löscht diese nacheinander.
let overlays = previewobjects.load('overlay', doc);
overlays.forEach(overlay => {
previewobjects.delete(overlay.overlay);
});