Which product are you using?
PDF.js Express Plus
Hello Beatriz,
Could you please clarify which highlight tool you are referring to and what version of PDF.js you are using?
Which situation do you want to convert the rectangle annotation to a highlight annotation?
If you want to highlight an area of text captured by the rectangle annotation, you can use the following code snippet below.
const { Annotations, annotationManager } = instance.Core;
let debounce = null;
annotationManager.addEventListener("annotationSelected", (annots) => {
annots.forEach((annot) => {
if (annot instanceof Annotations.RectangleAnnotation) {
// get page number and quads from rectangle annotation
const pageNumber = annot.getPageNumber();
const quads = [annot.getRect().toQuad()];
// Add some debouncing to prevent constant triggering during selection
if (debounce) {
clearTimeout(debounce);
}
debounce = setTimeout(() => {
// Create highlight annotation with object initializer
const highlight = new Annotations.TextHighlightAnnotation({
PageNumber: pageNumber,
Quads: quads,
StrokeColor: new Annotations.Color(255, 0, 0, 1),
});
// delete the rectangle annotation and redraw the highlight annotation for the captured text
annotationManager.addAnnotation(highlight);
annotationManager.deleteAnnotation(annot);
annotationManager.redrawAnnotation(highlight);
debounce = null;
}, 1000);
}
});
});
Hope this helps.
Best Regards,
Darian Chen
I import square annotations and I want to transform then into highlight annotations just like your example, but all of them at once
Also how cant I put the square annotation under the text?
Hello Beatriz,
I’m not sure what you mean by putting the square annotation under the text, could you please clarify?
If you are using the importAnnotations or importAnnotationCommand API, you can use the following code snippet to highlight all areas captured by the imported rectangle annotations.
const { Annotations, annotationManager } = instance.Core;
annotationManager.addEventListener("annotationChanged", (annots, action, { imported }) => {
if (imported) {
annots.forEach((annot) => {
if (annot instanceof Annotations.RectangleAnnotation) {
// get page number and quads from rectangle annotation
const pageNumber = annot.getPageNumber();
const quads = [annot.getRect().toQuad()];
// Create highlight annotation with object initializer
const highlight = new Annotations.TextHighlightAnnotation({
PageNumber: pageNumber,
Quads: quads,
StrokeColor: new Annotations.Color(255, 0, 0, 1),
});
// redraw the highlight annotation for the captured text
annotationManager.addAnnotation(highlight);
annotationManager.redrawAnnotation(highlight);
}
});
}
});
Best Regards,
Darian Chen
How can I get the title of the square annotation and set to the highlight annotation?
Hello Beatriz,
Depending on where you import the rectangle annotations, those areas will be highlighted. In your image, if you want that area to be highlighted, you need to import the rectangle onto that line of text.
To get the name of the annotations, you can use elementName property. There is also an Id property.
annot.elementName;
annot.Id;
Best Regards,
Darian Chen
It doesn’t work
Hello Beatriz,
My apologies for misunderstanding the question. You can set the author of the highlight annotation by using the Author property like in the following in image.
Best Regards,
Darian Chen
Thanks! How can I get the selected text of a highlight annotation?
Hello Beatriz,
There currently doesn’t seem to be a way to get highlighted text by creating the highlight with the above suggested method. It seems you need to select the text in order to get it, as done by the highlight tool.
Please see the link below to learn more about the available APIs and members for the text highlight annotation.
Guide: PDFJS Express WebViewer Class: TextHighlightAnnotation
Best Regards,
Darian Chen