Add images to PDFs with GemBox.PdfViewer, using JavaScript
GemBox.PdfViewer allows you to add images to PDF documents opened in a browser, enabling users to insert images directly on any page. This feature is particularly useful for adding diagrams, logos, signatures, or other visual elements to existing PDFs.
Basic Usage
To enable image functionality, configure the toolbar options when creating the viewer in JavaScript:
GemBoxPdfViewer.create({
container: "#viewer",
initialDocument: "/document.pdf",
ui: {
toolbar: {
image: {
isVisible: true // default
}
}
}
});With this configuration, users can click the image button in the toolbar, select an image file, and place it on any page of the document.
Programmatic Control
You can control the visibility of image controls programmatically after the viewer has been created:
let viewer = await GemBoxPdfViewer.create({
container: "#viewer",
initialDocument: "/document.pdf"
});
// Show image controls
viewer.ui.toolbar.image.isVisible = true;
// Hide image controls
viewer.ui.toolbar.image.isVisible = false;
// Check current visibility state
let isImageVisible = viewer.ui.toolbar.image.isVisible;
viewer.features.annotations.addEventListener("annotationCreated", function (event) {
// Whether the created annotation is an image.
const isImage = event.annotation.type == AnnotationType.IMAGE;
if (isImage) {
console.log("Image has been added.");
}
});
