Some test text!

menu
Createkeyboard_arrow_down

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

Creating Redactions

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

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more
close