Creating redactions

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features

Package: RedactionLive demo

Redactions can be created using the WebViewer UI or programmatically.

Creating 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.

Creating 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: A Math.Rect object of the redaction area.
• Quads: An array of Math.Quad objects of to specify multiple redaction areas. If Quads are provided then Rect is not needed.

JavaScript (SDK v8.0+)

WebViewer(...)
  .then(instance => {
    const {
      documentViewer,
      annotationManager,
      Annotations,
      Math
    } = instance.Core;
    documentViewer.addEventListener('documentLoaded', () => {
      const redactAnnot1 = new Annotations.RedactionAnnotation({
          PageNumber: 1,
          Rect: new Math.Rect(100, 100, 300, 200) // Rect are in the form x1,y1,x2,y2
      });
      const 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 Math.Quad(100, 290, 300, 210, 300, 210, 100, 290),
              new Math.Quad(100, 390, 300, 310, 300, 310, 100, 390)
          ]
      });
      // can still create redactions without options and set them afterward
      const redactAnnot3 = new Annotations.RedactionAnnotation();
      redactAnnot3.PageNumber = 1;
      // using 'setRect' instead of setting 'X','Y','Width', or 'Height' directly
      redactAnnot3.setRect(new Math.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);
      const redactAnnotations = [redactAnnot1, redactAnnot2, redactAnnot3];
      annotationManager.addAnnotations(redactAnnotations);
      // need to draw the annotations otherwise they won't show up until the page is refreshed
      annotationManager.drawAnnotationsFromList(redactAnnotations);
    });
  });

WebViewerInstance DocumentViewer#documentLoaded RedactionAnnotation RedactionAnnotation.setRect AnnotationManager.addAnnotations AnnotationManager.drawAnnotationsFromList

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const {
      docViewer,
      annotManager,
      Annotations
    } = instance;

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

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

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

WebViewerInstance DocumentViewer#documentLoaded RedactionAnnotation RedactionAnnotation.setRect AnnotationManager.addAnnotations AnnotationManager.drawAnnotationsFromList