WaterMark as annotation

Technical Support WebViewer
, , , ,
1

WebViewer Version: 11.7.1

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? No
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? No

Please give a brief summary of your issue: WaterMark as annotation

Please describe your issue and provide steps to reproduce it:
I want to create a functionality where user can add watermark on the pdf. Now I want to save that watermark as annotation and export that annotation to the database.

instance.UI.addPanel({
     title: 'WaterMark',
     dataElement: 'waterMarkPanel',
     location: 'left',
     icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path d="M19.89,2H4.33A2.23,2.23,0,0,0,2.11,4.22V19.78A2.23,2.23,0,0,0,4.33,22H19.89a2.22,2.22,0,0,0,2.22-2.22V4.22A2.22,2.22,0,0,0,19.89,2ZM4.33,19.78V4.22H19.89V19.78Z"></path>
   <polygon points="13.94 8.13 18.78 15.87 11.52 15.87 9.1 15.87 5.45 15.87 8.48 11.43 10.26 14.02 13.94 8.13"></polygon>
</svg>`,
     render: () => {
         const container = document.createElement('div');
         container.style.padding = '16px';
         container.style.fontFamily = 'Arial';
         container.innerHTML = `
     <div class="wm-row">
         <div class="wm-label">Choose a location to edit watermarks</div>
         <select id="wmPosition" class="wm-select">
           <option value="Center">Center</option>
           <option value="TopLeft">Top Left</option>
           <option value="TopRight">Top Right</option>
           <option value="TopCenter">Top Center</option>
           <option value="BottomLeft">Bottom Left</option>
           <option value="BottomRight">Bottom Right</option>
           <option value="BottomCenter">Bottom Center</option>
         </select>
     </div>
     <div class="wm-row">
         <div class="wm-label">Text</div>
         <input id="wmText" class="wm-input" type="text"/>
     </div>
     <div class="wm-row">
         <div class="wm-label">Font</div>
         <select id="wmFont" class="wm-select">
           <option>Arial</option>
           <option>Times New Roman</option>
           <option>Tahoma</option>
           <option>Trebuchet MS</option>
           <option>Courier</option>
           <option>Verdana</option>
           <option>Georgia</option>
           <option>Palatino</option>
           <option>Comic Sans MS</option>
           <option>Arial Black</option>
           <option>Impact</option>
         </select>
     </div>
     <div class="wm-row">
         <div class="wm-label">Size</div>
         <input id="wmSize" class="wm-input" type="number"/>
     </div>
     <div class="wm-row">
         <div class="wm-label">Opacity</div>
         <input id="wmOpacity" type="range" min="1" max="100" value="100"/>
         <span id="opacityValue">100%</span>
     </div>
     <div class="wm-row">
         <div class="wm-label">Color</div>
           <div style="display:flex; align-items:center; gap:10px;">
             <input id="wmColor" type="color" value="#ff0000"/>
           </div>
     </div>
     <div class="wm-row">
         <button id="addWatermark" class="wm-btn">Add</button>
     </div>
     `;
         container.querySelector('#wmOpacity').addEventListener('input', e => {
             container.querySelector('#opacityValue').innerText = e.target.value + '%';
         });
         container.querySelector('#wmColor').addEventListener('input', e => {
             container.querySelector('#wmColorValue').innerText = e.target.value;
         });
         container.querySelector('#addWatermark').addEventListener('click', () => {
             const watermarkData = {
                 text: container.querySelector('#wmText').value,
                 position: container.querySelector('#wmPosition').value,
                 font: container.querySelector('#wmFont').value,
                 size: container.querySelector('#wmSize').value,
                 opacity: container.querySelector('#wmOpacity').value,
                 color: container.querySelector('#wmColor').value
             };
             console.log('Watermark Data:', watermarkData);
             documentViewer.setWatermark({
                 diagonal: {
                     fontSize: watermarkData.size,
                     fontFamily: watermarkData.font,
                     color: watermarkData.color,
                     opacity: watermarkData.opacity,
                     text: watermarkData.text,
                 },
             });
         });
         return container;
     }
 });
1 Like
2

Hello, I’m AiRon, an automated tech support bot :robot: While you wait for one of our customer support representatives, I can help you with your question.


It seems like you’re trying to implement a feature that allows users to add watermarks to a PDF document and then save these watermarks as annotations for export to a database. This involves creating a custom UI for watermark input, applying the watermark, and handling annotations.

Some things you can try:

  • Use the WebViewer’s annotation tools to create a text annotation that represents your watermark.

  • Convert the watermark data (text, position, font, etc.) into an annotation using the AnnotationManager.

  • Export the annotation as XFDF using the exportAnnotations or exportAnnotationCommand methods.

  • Store the XFDF data in your database for later retrieval and import.

  • Ensure that the annotation properties match the visual appearance of your watermark.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

1 Like
3

Hi there,

The setWatermark API renders a viewer watermark overlay, it does not create an annotation on the PDF.
To save a watermark as an annotation, you would need to use an annotation such as FreeText or Stamp via the AnnotationManager, then export the XFDF to your database.

Best regards,
Kevin

1 Like