Apply Image as a watermark in the pdftron viewer

[Loganathan S]

Dear Team,

We are trying to apply image watermark into the viewer and after applying the image and below are the issue we have faced.

- When I click next or previous using the viewer button then the document becomes Blur in the viewer. I have attached the viewer source as well as the Blur screen shot for your reference. 

- Scroll the viewer then the watermark image is showing multiple times in a page.

Sample code we used in the page complete Event in Readercontrol.JS:

 var canvasid = null;

            canvasid = "#canvas" + pageIndex.toString();

            var canvasheight = me.getPageContainer(pageIndex)[0].clientHeight;

            var canvaswidth = me.getPageContainer(pageIndex)[0].clientWidth;

            var height = parseInt(canvasheight);

            var width = parseInt(canvaswidth);

            var pageContainer = me.getPageContainer(pageIndex);

            var type = "pdf";

            var imagewidth;

            var imageheight;

            if (type == ".xls" || type == ".xlsx") {

                imagewidth = width / 2;

                imageheight = height / 2;

            }

            else if (type == ".ppt" || type == ".pptx") {

                imagewidth = width / 2 - 140;

                imageheight = height / 2;

            }

            else {

                if (width <= 300 || height <= 300) {

                    imagewidth = width / 2;

                    imageheight = height / 2;

                }

                else {

                    imagewidth = 300;

                    imageheight = 300;

                }

            }

            pageContainer.append('<div id="divcenter" style="top: 0px; width: ' + width + 'px; height: ' + height + 'px; position:relative;display: table-cell; z-index: 30; vertical-align: middle;opacity: 0.3;text-align: center;"><img style="height: ' + imageheight + 'px;width: ' + imagewidth + 'px;" src="https://s3.amazonaws.com/contents2016/google_logo.jpg" alt=""/></div>');

Can you please provide a solution to resolve the issue.

Thank you

 

Regards,

Loganathan S

[Matt Parizeau]

This sounds like it might be the same issue as listed here: https://groups.google.com/d/msg/pdfnet-webviewer/A4dn7uvB2m0/C84cHHvBCQAJ

Did you try the fix of changing the position attribute to absolute instead of relative?

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Loganathan S]

Matt,

We changed position to absolute and water mark image displayed in top of page and watermark image embossed herewith attached screen short. 

We need watermark image in background transparent and watermark image well be display in center of the page.

 Please give me suitable fix for this issue needful ASAP.

Thank you

 Regards,

Loganathan S

[Justin Jung]

Since it's a DOM element, you can use the chrome developer tools to change the css on the fly to try out different positionings quickly.

One of the common way of centering absolutely positioned elements is using the following:

.myElement {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

}

You can also refer to this post: https://stackoverflow.com/questions/28455100/how-to-center-div-vertically-inside-of-absolutely-positioned-parent-div

Justin Jung