Section:

Creating redactions

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.

Apryse Docs Image

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: 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.
1WebViewer(...)
2  .then(instance => {
3    const {
4      documentViewer,
5      annotationManager,
6      Annotations
7    } = instance.Core;
8
9    documentViewer.addEventListener('documentLoaded', () => {
10      const redactAnnot1 = new Annotations.RedactionAnnotation({
11          PageNumber: 1,
12          Rect: new Annotations.Rect(100, 100, 300, 200) // Rect are in the form x1,y1,x2,y2
13      });
14
15      const redactAnnot2 = new Annotations.RedactionAnnotation({
16          PageNumber: 1,
17          StrokeColor: new Annotations.Color(0, 255, 0),
18          FillColor: new Annotations.Color(0, 0, 255),
19          Quads: [
20              // Quads are in the form x1,y1,x2,y2,x3,y3,x4,y4
21              new Annotations.Quad(100, 290, 300, 210, 300, 210, 100, 290),
22              new Annotations.Quad(100, 390, 300, 310, 300, 310, 100, 390)
23          ]
24      });
25
26      // can still create redactions without options and set them afterward
27      const redactAnnot3 = new Annotations.RedactionAnnotation();
28      redactAnnot3.PageNumber = 1;
29      // using 'setRect' instead of setting 'X','Y','Width', or 'Height' directly
30      redactAnnot3.setRect(new Annotations.Rect(100, 100, 300, 200));
31      // set border color
32      redactAnnot3.StrokeColor = new Annotations.Color(0, 255, 0);
33      // set redacted color
34      redactAnnot3.FillColor = new Annotations.Color(0, 0, 255);
35
36      const redactAnnotations = [redactAnnot1, redactAnnot2, redactAnnot3];
37
38      annotationManager.addAnnotations(redactAnnotations);
39
40      // need to draw the annotations otherwise they won't show up until the page is refreshed
41      annotationManager.drawAnnotationsFromList(redactAnnotations);
42    });
43  });

Related Links

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales