When printing the excel document,Watermark is not display at the bottom of the page.

[jayas...@contentraven.net]

Hi All,

We are using the latest WebViewer to view the XOD file. We have a problem with the watermark when printing the excel document.

We apply the sample watermark in the top and bottom of the page, watermark is not displayed the bottom of the page. Attached the sample xls xod file for your reference.

But we apply the same process into Word document,it's is working as expected and also attached the sample xod file for your reference.

Note: This issue in landscape mode.

My sample code as given below in BaseReaderControl.js,

doc.loadCanvasAsync(pageNumber - 1, zoom, rotation, function(canvas) {

                    var ctx = canvas.getContext('2d');

                    // transform the canvas context so that annotations are drawn in the correct location

                    var t = window.GetPageMatrix(zoom, annotationRotationOffset, pageInfo);

                    ctx.setTransform(t.m_a, t.m_b, t.m_c, t.m_d, t.m_h, t.m_v);

                    me.docViewer.getAnnotationManager().drawAnnotations(pageNumber, canvas);

                    //apply watermark

                    var waterMarktext = "This is sample watermark";

                    var lines = waterMarktext.split('<br/>');

                    var fontsize = 60;

                    ctx.textAlign = 'center';

                    ctx.fillStyle = "red";

                    ctx.globalAlpha = 0.8;

                    ctx.font = fontsize + 'px san-serif';

                    var x = canvas.width / 2;

                    var y = canvas.height / 2;

                    y = 35;

                   

                    var space = 0;

                    //reduce font size based on canvas width

                    do {

                        fontsize--;

                        ctx.font = fontsize + 'px san-serif';

                    } while (ctx.measureText(waterMarktext).width > canvas.width / 2)

                    //apply water top and bottom of the document

                    for (var i = 0; i < lines.length; i++) {

                        ctx.fillText(lines[i], x, y + space);

                        space = space + parseInt(fontsize);

                    }

                    space = 0;

                    y = canvas.height - (lines.length * fontsize);

                    for (var i = 0; i < lines.length; i++) {

                        ctx.fillText(lines[i], x, y + space);

                        space = space + parseInt(fontsize);

                    }

                    //End

                    dataurl = canvas.toDataURL();

                    img = $('<img>')

                        .attr('src', dataurl)

                        .css({

                            'max-height': '100%',

                            'max-width': '100%'

                        })

                        .load(function() {

                            if (!me.preparingForPrint) {

                                return;

                            }

                            printDisplay.append(img);

                            me.fireEvent('printProgressChanged', [index + 1, pages.length]);

                            index++;

                            if (index < pages.length) {

                                loadPageLoop();

                            } else {

                                completeCallback(printDisplay);

                                window.utils.unsetCanvasMultiplier();

                                me.preparingForPrint = false;

                            }

                        });

                    if (isInline) {

                        img.css('display', 'block');

                        if (index > 0) {

                            img.css('page-break-after', 'always');

                        }

                    }

                }, function() {}, 1);

How would I add a watermark when printing the pages?

Please help me ASAP

Thanks

[Justin Jung]

Hello,

You can modify your part of the code in BaseReaderControl.js as follows:

//apply watermark

var waterMarktext = "This is sample watermark";

var lines = waterMarktext.split('<br/>');

var fontsize = 60;

ctx.textAlign = 'center';

ctx.fillStyle = "red";

ctx.globalAlpha = 0.8;

ctx.font = fontsize + 'px san-serif';

var width = canvas.width;

var height = canvas.height;

if (pageInfo.width > pageInfo.height) {

    width = canvas.height;

    height = canvas.width;

}

//reduce font size based on canvas width

do {

    fontsize--;

    ctx.font = fontsize + 'px san-serif';

} while (ctx.measureText(waterMarktext).width > width / 2)

//apply water top and bottom of the document

var x = width / 2;

var y = 35;

for (var i = 0; i < lines.length; i++) {

    ctx.fillText(lines[i], x, y + (i * parseInt(fontsize)));

}

y = height - (lines.length * fontsize);

for (var i = 0; i < lines.length; i++) {

    ctx.fillText(lines[i], x, y + (i * parseInt(fontsize)));

}

//End

Justin Jung

Software Developer

PDFTron Systems Inc.

--
You received this message because you are subscribed to the Google Groups "PDFTron WebViewer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pdfnet-webviewer+unsubscribe@googlegroups.com.
To post to this group, send email to pdfnet-webviewer@googlegroups.com.
Visit this group at https://groups.google.com/group/pdfnet-webviewer.
For more options, visit https://groups.google.com/d/optout.

--

Justin Jung

Software Developer

PDFTron Systems Inc.

[jayas...@contentraven.net]

Justin Jung,

Thank you for your kind response.

Above mentioned code has been working as expected,but i have a problem with the centre watermark of the document.

My sample code :

                            ctx.translate(x, y);

                            ctx.rotate(-Math.atan(height / width));

                            for (var i = 0; i < lines.length; i++) {

                         

                                ctx.fillText(lines[i], 0, (i * parseInt(fontsize)));

                            }

                            ctx.restore();

i have attached screenshot for current and expected output print for your reference.

Please help me ASAP

Thanks

[Justin Jung]

Hello,

If you would want the watermark to be stretched to fill diagonally, you could try something like this:

//apply watermark

var waterMarktext = "This is sample watermark";

var lines = waterMarktext.split('<br/>');

var fontsize = 12;

var pageInfo = doc.getPageInfo(pageNumber - 1);

ctx.textAlign = 'center';

ctx.textBaseline = 'middle';

ctx.fillStyle = "red";

ctx.globalAlpha = 0.8;

ctx.font = fontsize + 'px san-serif';

var width = canvas.width;

var height = canvas.height;

if (pageInfo.width > pageInfo.height) {

    width = canvas.height;

    height = canvas.width;

}

//reduce font size based on canvas size

do {

    fontsize++;

    ctx.font = fontsize + 'px san-serif';

} while (ctx.measureText(waterMarktext).width < Math.hypot(width, height) - (fontsize * 2))

ctx.translate(width / 2, height / 2);

ctx.rotate(-Math.atan(height / width));

for (var i = 0; i < lines.length; i++) {

    ctx.fillText(lines[i], 0, (i * parseInt(fontsize)));

}

ctx.restore();

//End

Justin Jung

Software Developer

PDFTron Systems Inc.

--

You received this message because you are subscribed to the Google Groups "PDFTron WebViewer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pdfnet-webviewer+unsubscribe@googlegroups.com.
To post to this group, send email to pdfnet-webviewer@googlegroups.com.
Visit this group at https://groups.google.com/group/pdfnet-webviewer.
For more options, visit https://groups.google.com/d/optout.

[jayas...@contentraven.net]

Justin Jung,

Thank you,

We apply above code,we have a problem with apply multiple watermark text when printing the document.

Sample Code: 

var waterMarktext = "Testing waterMark<br/>Content Name : Testing Content Name<br/>testing user<br/>tes...@yopmail.com<br/>";

 var fontsize = 80;

do {

                        fontsize++;

                        ctx.font = fontsize + 'px san-serif';

                    } while (ctx.measureText(longestText).width < Math.hypot(width, height) - (fontsize * 2))

ctx.translate(width / 2, height / 2);

                            ctx.rotate(-Math.atan(height / width));

                            for (var i = 0; i < lines.length; i++) {

                                // context.fillText(lines[i], 0, space);

                                ctx.fillText(lines[i], 0, (i * parseInt(fontsize)));

                            }

                            ctx.restore();

Note : when printing the document will display the watermark text based on font size.

Please help me ASAP.

Thanks

On Thursday, March 23, 2017 at 9:03:06 PM UTC+5:30, (unknown) wrote:

[Justin Jung]

Hello,

You can edit your code as follows:

//apply watermark

var waterMarktext = "Content Name : Testing Content Name<br/>Testing waterMark<br/>Content Name : Testing Content Name<br/>testing user<br/>tes...@yopmail.com<br/>Content Name : Testing Content Name";

var lines = waterMarktext.split('<br/>');

var longestText = lines[0];

var lineCount = 0;

for (var i = 1; i < lines.length; i++) {

    if (lines[i].length > longestText.length) {

        longestText = lines[i];

    }

}

var fontsize = 12;

var pageInfo = doc.getPageInfo(pageNumber - 1);

ctx.textAlign = 'center';

ctx.textBaseline = 'top';

ctx.fillStyle = "red";

ctx.globalAlpha = 0.8;

ctx.font = fontsize + 'px san-serif';

var width = canvas.width;

var height = canvas.height;

// This block must be removed to center the watermark on landscape documents as well

/*

if (pageInfo.width > pageInfo.height) {

    width = canvas.height;

    height = canvas.width;

}

*/

var textWidth = 0;

var textHeight = 0;

var hypot = Math.hypot(width, height);

do {

    fontsize++;

    ctx.font = fontsize + 'px san-serif';

    textWidth = ctx.measureText(longestText).width;

    textHeight = fontsize * lines.length;

} while (textWidth + (textHeight * (height / width)) < hypot && textWidth + (textHeight * (width / height)) < hypot)

ctx.translate(width / 2, height / 2);

ctx.rotate(-Math.atan(height / width));

for (var i = 0; i < lines.length; i++) {

    ctx.fillText(lines[i], 0, ((i * fontsize) - (textHeight / 2)));

}

ctx.restore();

//End

Justin Jung

Software Developer

PDFTron Systems Inc.

--

You received this message because you are subscribed to the Google Groups "PDFTron WebViewer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pdfnet-webviewer+unsubscribe@googlegroups.com.
To post to this group, send email to pdfnet-webviewer@googlegroups.com.
Visit this group at https://groups.google.com/group/pdfnet-webviewer.
For more options, visit https://groups.google.com/d/optout.

[jayas...@contentraven.net]

Hi Justin Jung,

Thank you for your response.

How can i add a image watermark in centre of the document when printing?

My sample code:

 var img = document.getElementById("imgWM");

                            context.globalAlpha = 0.4;                           

                            context.drawImage(img, x , y, 300, 300);

Note: The image watermark should resize and x,y position based on document.

Please help me ASAP.

Thanks

On Thursday, March 23, 2017 at 9:03:06 PM UTC+5:30, (unknown) wrote:

[Justin Jung]

Hello,

You can get the width and height of both canvas and image from their 'width' and 'height' properties. You could use those metrics in order to resize and position the watermark properly. For example,

var wmImage = document.getElementById("imgWM");

var wmWidth = width / 2;

var wmHeight = height / 2;

ctx.translate(canvas.width / 2, canvas.height / 2);

ctx.drawImage(wmImage, -wmWidth / 2, -wmHeight / 2, wmWidth, wmHeight);

Here are some canvas API links that would be helpful.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate

https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage