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);
});