StampAnnotation quality image, svg support

Technical Support
1

I’m having some difficulty importing an image into pdf.js and maintaining the quality of the image because I need to resize it, is there any way I can import an svg.

I’m using the method StampAnnotation

      const {width, height} = document.getPageInfo(1);

      const ratio = height / width;

      const stampAnnot = new this.annotations.StampAnnotation();
      stampAnnot.PageNumber = 1;
      stampAnnot.X = 100;
      stampAnnot.Y = 250;
      stampAnnot.Width = 275;
      stampAnnot.Height = 275 * ratio;
      const keepAsSVG = true;
      stampAnnot.setImageData(imageData, keepAsSVG);
      stampAnnot.Author = this.annotManager.getCurrentUser();
      stampAnnot.Rotation = 0;

      this.annotManager.addAnnotation(stampAnnot);
      this.annotManager.redrawAnnotation(stampAnnot);
3

Hi Julio,

I just tried with the code provided to import an SVG and it looks look in the Express viewer.

Could you provide screenshots to show the quality of the image and the URL for the SVG you’re using for the stamp image data?

Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

4

zone.js:1063 Unhandled Promise rejection: File extension svg is not supported. Please see PDFTron Systems Inc. | Documentation for a full list of file formats supported by WebViewer.

    const stamp = 'https://votuporanga.prefeitura.rlz.com.br/carrimbo.svg';

      const document = await this.instance.CoreControls.createDocument(stamp, {extension: 'svg', l: 'licence'});

      const imageData = await new Promise(resolve => {
        document.loadCanvasAsync({
          pageNumber: 1,
          drawComplete: (canvas) => {
            const url = canvas.toDataURL();
            resolve(url);
          }
        });
      });

      const {width, height} = document.getPageInfo(1);

      const ratio = height / width;

      const stampAnnot = new this.annotations.StampAnnotation();
      stampAnnot.PageNumber = 1;
      stampAnnot.X = 100;
      stampAnnot.Y = 250;
      stampAnnot.Width = 275;
      stampAnnot.Height = 275 * ratio;
      const keepAsSVG = true;
      stampAnnot.setImageData(imageData, keepAsSVG);
      stampAnnot.Author = this.annotManager.getCurrentUser();
      stampAnnot.Rotation = 0;

      this.annotManager.addAnnotation(stampAnnot);
      this.annotManager.redrawAnnotation(stampAnnot);
5

Hi Julio,

Thanks for the code snippet. I was having some issues on my local host with fetching the URL you sent so I uploaded the image to our AWS. Was able to get the stamp to use that SVG using the PDFTron AWS link.

stampAnnot.setImageData('https://pdftron.s3.amazonaws.com/custom/test/tyler/carrimbo.svg', keepAsSVG);

Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

6

I managed to make it work, but I needed to launch a loading screen, as the function that loads the image stampAnnot.setImageData file takes a while to be processed, and does not display anything in the system during loading

the command didn’t work
this.instance.openElements([‘loadingModal’]);

      this.instance.openElements(['loadingModal']);

      const stampAnnot = new this.annotations.StampAnnotation();
      stampAnnot.PageNumber = 1;
      stampAnnot.X = 100;
      stampAnnot.Y = 250;
      stampAnnot.Width = 275;
      stampAnnot.Height = 275 * 0.359;
      const keepAsSVG = true;
      stampAnnot.setImageData('http://localhost/image.svg', keepAsSVG);
      stampAnnot.Author = this.annotManager.getCurrentUser();
      stampAnnot.Rotation = 0;

      this.annotManager.addAnnotation(stampAnnot);
      this.annotManager.redrawAnnotation(stampAnnot);

      this.instance.closeElements(['loadingModal']);
7

Have you tried wrapping this code in an event listener like ‘documentLoaded’?

ex

documentViewer.addEventListener('documentLoaded', async () => {
...

Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

8

I couldn’t make it work


this.instance.docViewer.addEventListener('documentLoaded', async () => {
        this.instance.openElements(['loadingModal']);
        const stampAnnot = new this.annotations.StampAnnotation();
        stampAnnot.PageNumber = 1;
        stampAnnot.X = 100;
        stampAnnot.Y = 250;
        stampAnnot.Width = 275;
        stampAnnot.Height = 275 * 0.359;
        const keepAsSVG = true;
        stampAnnot.setImageData(this.stamp + '/svg', keepAsSVG);
        stampAnnot.Author = this.annotManager.getCurrentUser();
        stampAnnot.Rotation = 0;

        this.annotManager.addAnnotation(stampAnnot);
        this.annotManager.redrawAnnotation(stampAnnot);
		
        this.instance.closeElements(['loadingModal']);

      });
9

Thank for the code sample.

The issue I think is not await the setImageData call. If you await that line it should open the loading modal.

Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here