Some test text!

platform
search

Redaction

Contents

Overview
Setting up WebViewer
Creating redactions
Creating redactions with the UI
Creating redactions programmatically
Applying redactions
Applying redactions with the WebViewer
Applying redactions programmatically
Relevant APIs

linkOverview

Redaction is a form of editing where information is permanently removed from a document. This is typically used to remove classified information so confidential documents can be distributed. Redaction consists of two steps:

  1. Marking content (text, images, or pages) for redaction. This creates a rectangle around the content to be removed and hovering over the redaction will show what it will look like when it's applied.
Redactions need to be applied for the content to be removed. Even if a redaction annotation obscures text from being viewed, it's still possible to get access to the information behind the redaction.
  1. Applying redactions to remove information. Typically, a black rectangle is used to cover up the redacted area but this can be configured to another color or to show overlay text. This step is irreversible and the content is permanently removed.

linkSetting up WebViewer

When creating a new instance of WebViewer, the enableRedaction property needs to be set to true for users to create new redactions and the fullAPI or pdftronServer properties need to be setup to be able to apply redactions. It's possible to use redactions with only enableRedaction, but users won't be able to apply redactions.

var myWebViewer = new PDFTron.WebViewer({
    ... // other options
    fullAPI: true,
    // can also use 'pdftronServer' instead of 'fullAPI'
    // pdftronServer: 'https://demo.pdftron.com/'
    enableRedaction: true
}, viewerElement);

Besides passing in a constructor option, redaction can be toggled using the WebViewer API with the enableRedaction and disableRedaction functions.

var myWebViewer = new PDFTron.WebViewer({
    ... // other options
}, viewerElement);

viewerElement.addEventListener('documentLoaded', function() {   
  myWebViewer.getInstance().enableRedaction();
}

linkCreating redactions

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 = myWebViewer.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);
}

linkApplying redactions

Redactions can be applied using the WebViewer UI or programmatically.

Please Note!
Even when programmatically applying redactions, fullAPI or pdftronServer must be set up. Furthermore when using WebViewer Server, applyRedactions will return a promise that resolves to a URL for the redacted document instead of updating the current document.

linkApplying redactions with the WebViewer

A user can simply click on a redaction annotation and click on the apply button to apply a single redaction.

There is also an 'Apply All' button that applies every redaction annotation in the document.

linkApplying redactions programmatically

Redactions can be applied using the applyRedactions function on AnnotationManager. applyRedactions returns a promise and can be used to apply a single redaction, an array of redactions, or all redactions in a document. When using WebViewer Server, the returned promise will resolve to a response object with a URL to download the redacted document.

var annotManager = docViewer.getAnnotationManager();
var redactionList = annotManager.getAnnotationsList().filter(function(annot) {return annot instanceof Annotations.RedactionAnnotation});

// apply a single redaction
annotManager.applyRedactions(redactionList[0])
  // When using WebViewer Server, 'results' will be a response object with a 'url' property for downloading the redacted document.
.then(function(results) {
  return annotManager.applyRedactions(redactionList.filter(function(redaction) { return redaction.Author === 'User'}));
  // When using WebViewer Server, the previous redaction will not appear in the results. It'll only redact the redactions provided to 'applyRedactions'.
  // However when using 'fullAPI', the document will have all previously applied redactions
}).then(function(results)} {
  return annotManager.applyRedactions();
});

linkRelevant APIs

Behind the scenes AnnotationManager uses the low level PDFNet.Redactor API which can be used directly for more complicated use cases. An example of it being used can be found here.

Get the anwsers you need: Support

Contents

Overview
Setting up WebViewer
Creating redactions
Creating redactions with the UI
Creating redactions programmatically
Applying redactions
Applying redactions with the WebViewer
Applying redactions programmatically
Relevant APIs