Some test text!

Creating redactions

Contents

Creating redactions with the UI
Creating redactions programmatically

Redactions can be created using the WebViewer UI or programmatically.

linkCreating redactions with the UI

To create a new redaction in WebViewer, click on the redaction tool icon to enter redaction mode. Next click and drag on the document to create a new redaction. Note that when creating a redaction on top of text, multiple rectangles are created, similar to when highlighting text.

linkCreating redactions programmatically

Redactions can be added to a document similarly to other annotations, by adding them to the AnnotationManager and redrawing. Redaction annotations have two differences compared to other annotation types.

  1. setRect() should be used instead of setting X,Y,Height, or Width directly
  2. The redaction annotation constructor can take an options object that can be used to configure the annotation. There are a number of properties that can be set using the constructor:

    • StrokeColor: This is the border color of the redaction before it been applied. Defaults to red.
    • FillColor: This is the fill color of the redaction after it been applied. Defaults to black.
    • PageNumber: The page that the redaction should appear on.
    • Rect: An Annotation.Rect object of the redaction area.
    • Quads: An array of Annotation.Quad objects of to specify multiple redaction areas. If Quads are provided then Rect is not needed.
viewerElement.addEventListener('documentLoaded', function() {
  var docViewer = viewer.getInstance().docViewer;
  var annotManager = docViewer.getAnnotationManager();

  var Annotations = document.querySelector('iframe').contentWindow.Annotations;

  var redactAnnot1 = new Annotations.RedactionAnnotation({
      PageNumber: 1,
      Rect: new Annotations.Rect(100, 100, 300, 200) // Rect are in the form x1,y1,x2,y2
  });

  var redactAnnot2 = new Annotations.RedactionAnnotation({
      PageNumber: 1,
      StrokeColor: new Annotations.Color(0, 255, 0),
      FillColor: new Annotations.Color(0, 0, 255),
      Quads: [
          // Quads are in the form x1,y1,x2,y2,x3,y3,x4,y4
          new Annotations.Quad(100, 290, 300, 210, 300, 210, 100, 290),
          new Annotations.Quad(100, 390, 300, 310, 300, 310, 100, 390)
      ]
  });

  // can still create redactions without options and set them afterward
  var redactAnnot3 = new Annotations.RedactionAnnotation();
  redactAnnot3.PageNumber = 1;
  // using 'setRect' instead of setting 'X','Y','Width', or 'Height' directly
  redactAnnot3.setRect(new Annotations.Rect(100, 100, 300, 200));
  // set border color
  redactAnnot3.StrokeColor = new Annotations.Color(0, 255, 0);
  // set redacted color
  redactAnnot3.FillColor = new Annotations.Color(0, 0, 255);

  var redactAnnotations = [redactAnnot1, redactAnnot2, redactAnnot3];

  annotManager.addAnnotations(redactAnnotations);

  // need to draw the annotations otherwise they won't show up until the page is refreshed
  annotManager.drawAnnotationsFromList(redactAnnotations);
}

Get the answers you need: Support

Contents

Creating redactions with the UI
Creating redactions programmatically