Redact feature in PDFJS

Technical Support
6

Hi!

You can do this by following these steps:

  1. Create a new Line tool and register it in the UI
  2. Add a button in the header for it

Here is some sample code that should work for you:

  const newLineTool = new instance.Tools.LineCreateTool(instance.docViewer)
  newLineTool.setStyles({
    StrokeThickness: '30pt'
  })
  instance.registerTool({
    toolName: 'LineRedactTool',
    buttonName: 'LineRedactTool',
    toolObject: newLineTool,
    showColor: 'always',
    buttonImage: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#abb0c4;}</style></defs><title>icon - tool - shape - line</title><rect class="cls-1" x="3" y="10.75" width="18" height="2.5" rx="0.6" transform="translate(-4.97 12) rotate(-45)"></rect></svg>'
  })

  instance.setHeaderItems(header => {
    const items = header.getItems();
    items.push({
      type: 'toolButton',
      toolName: 'LineRedactTool'
    })
    header.update(items);
  });

The relevant APIs can be found below:

Hope this helps!
Logan