How to Create a Text Watermark Without an Image

How can I create a text watermark without an image?

Like this? http://jsfiddle.net/fg7m3/

In this case, absolute positioning, z-index, and opacity are the key elements to make it look like a watermark.

Add text watermark to image watermark code

You can use imagestring() there are other image text function so checkout the manual for GD

imagestring($im, 1, 5, 5,  'A Simple Text String', $text_color);

How to watermark PDFs using text or images?

Please take a look at the TransparentWatermark2 example. It adds transparent text on each odd page and a transparent image on each even page of an existing PDF document.

This is how it's done:

public void manipulatePdf(String src, String dest) throws IOException, DocumentException {
    PdfReader reader = new PdfReader(src);
    int n = reader.getNumberOfPages();
    PdfStamper stamper = new PdfStamper(reader, new FileOutputStream(dest));
    // text watermark
    Font f = new Font(FontFamily.HELVETICA, 30);
    Phrase p = new Phrase("My watermark (text)", f);
    // image watermark
    Image img = Image.getInstance(IMG);
    float w = img.getScaledWidth();
    float h = img.getScaledHeight();
    // transparency
    PdfGState gs1 = new PdfGState();
    gs1.setFillOpacity(0.5f);
    // properties
    PdfContentByte over;
    Rectangle pagesize;
    float x, y;
    // loop over every page
    for (int i = 1; i <= n; i++) {
        pagesize = reader.getPageSizeWithRotation(i);
        x = (pagesize.getLeft() + pagesize.getRight()) / 2;
        y = (pagesize.getTop() + pagesize.getBottom()) / 2;
        over = stamper.getOverContent(i);
        over.saveState();
        over.setGState(gs1);
        if (i % 2 == 1)
            ColumnText.showTextAligned(over, Element.ALIGN_CENTER, p, x, y, 0);
        else
            over.addImage(img, w, 0, 0, h, x - (w / 2), y - (h / 2));
        over.restoreState();
    }
    stamper.close();
    reader.close();
}

As you can see, we create a Phrase object for the text and an Image object for the image. We also create a PdfGState object for the transparency. In our case, we go for 50% opacity (change the 0.5f into something else to experiment).

Once we have these objects, we loop over every page. We use the PdfReader object to get information about the existing document, for instance the dimensions of every page. We use the PdfStamper object when we want to stamp extra content on the existing document, for instance adding a watermark on top of each single page.

When changing the graphics state, it is always safe to perform a saveState() before you start and to restoreState() once you're finished. You code will probably also work if you don't do this, but believe me: it can save you plenty of debugging time if you adopt the discipline to do this as you can get really strange effects if the graphics state is out of balance.

We apply the transparency using the setGState() method and depending on whether the page is an odd page or an even page, we add the text (using ColumnText and an (x, y) coordinate calculated so that the text is added in the middle of each page) or the image (using the addImage() method and the appropriate parameters for the transformation matrix).

Once you've done this for every page in the document, you have to close() the stamper and the reader.

Caveat:

You'll notice that pages 3 and 4 are in landscape, yet there is a difference between those two pages that isn't visible to the naked eye. Page 3 is actually a page of which the size is defined as if it were a page in portrait, but it is rotated by 90 degrees. Page 4 is a page of which the size is defined in such a way that the width > the height.

This can have an impact on the way you add a watermark, but if you use getPageSizeWithRotation(), iText will adapt. This may not be what you want: maybe you want the watermark to be added differently.

Take a look at TransparentWatermark3:

public void manipulatePdf(String src, String dest) throws IOException, DocumentException {
    PdfReader reader = new PdfReader(src);
    int n = reader.getNumberOfPages();
    PdfStamper stamper = new PdfStamper(reader, new FileOutputStream(dest));
    stamper.setRotateContents(false);
    // text watermark
    Font f = new Font(FontFamily.HELVETICA, 30);
    Phrase p = new Phrase("My watermark (text)", f);
    // image watermark
    Image img = Image.getInstance(IMG);
    float w = img.getScaledWidth();
    float h = img.getScaledHeight();
    // transparency
    PdfGState gs1 = new PdfGState();
    gs1.setFillOpacity(0.5f);
    // properties
    PdfContentByte over;
    Rectangle pagesize;
    float x, y;
    // loop over every page
    for (int i = 1; i <= n; i++) {
        pagesize = reader.getPageSize(i);
        x = (pagesize.getLeft() + pagesize.getRight()) / 2;
        y = (pagesize.getTop() + pagesize.getBottom()) / 2;
        over = stamper.getOverContent(i);
        over.saveState();
        over.setGState(gs1);
        if (i % 2 == 1)
            ColumnText.showTextAligned(over, Element.ALIGN_CENTER, p, x, y, 0);
        else
            over.addImage(img, w, 0, 0, h, x - (w / 2), y - (h / 2));
        over.restoreState();
    }
    stamper.close();
    reader.close();
}

In this case, we don't use getPageSizeWithRotation() but simply getPageSize(). We also tell the stamper not to compensate for the existing page rotation: stamper.setRotateContents(false);

Take a look at the difference in the resulting PDFs:

In the first screen shot (showing page 3 and 4 of the resulting PDF of TransparentWatermark2), the page to the left is actually a page in portrait rotated by 90 degrees. iText however, treats it as if it were a page in landscape just like the page to the right.

In the second screen shot (showing page 3 and 4 of the resulting PDF of TransparentWatermark3), the page to the left is a page in portrait rotated by 90 degrees and we add the watermark as if the page is in portrait. As a result, the watermark is also rotated by 90 degrees. This doesn't happen with the page to the right, because that page has a rotation of 0 degrees.

This is a subtle difference, but I thought you'd want to know.

If you want to read this answer in French, please read Comment créer un filigrane transparent en PDF?

Watermark an Image using Text in PHP

One problem I can see straight away is that the $imagetobewatermark variable starts off as a string, then becomes a new blank image object (not an existing image), and when you subsequently create the mark image object, it's not going to work because $imagetobewatermark is no longer a string.

Try:

$imagetobewatermark=imagecreatefrompng("images/muggu.png");
$watermarktext="Muggu";
$font="../font/century gothic.ttf";
$fontsize="15";
$white = imagecolorallocate($imagetobewatermark, 255, 255, 255);
imagettftext($imagetobewatermark, $fontsize, 0, 20, 10, $white, $font, $watermarktext);
header("Content-type:image/png");
imagepng($imagetobewatermark);
imagedestroy($imagetobewatermark);

EDIT:
I failed to notice a typo in your text variable $wartermarktext, which should be $watermarktext.
Correct this and it should work.

Change watermark text to a watermark image

There is a much easier way to do this with stylesheets that target printing.

Demo

https://repl.it/@AnonymousSB/SO53360134

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="print.css" rel="stylesheet" type="text/css" media="print" />
  </head>
  <body>
    <script src="script.js"></script>
    <button onclick="window.print();">Print</button>
    <img id="watermark" src="logo.png" alt="A watermark you can only see when you print" />
    <section>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id sapien et sem lobortis pharetra at vitae orci. Nullam ipsum velit, sollicitudin ac fringilla et, interdum elementum quam. Donec magna augue, dignissim vitae finibus faucibus, hendrerit quis libero. In quis quam pulvinar lacus faucibus convallis sit amet at enim. Etiam varius urna vitae sem tristique, eget placerat turpis semper. Quisque dictum purus sit amet metus venenatis vehicula. Etiam ac ex at dui imperdiet lobortis eget eget augue. Quisque fermentum aliquam condimentum. Nulla eget enim auctor, venenatis metus sit amet, aliquet turpis. Proin id pretium risus.
      </p>
    </section>
  </body>
</html>

CSS (link href="style.css" rel="stylesheet" type="text/css")

#watermark {
  display: none;
}

CSS (link href="print.css" rel="stylesheet" type="text/css" media="print")

#watermark {
  display: block;
  width: 150px;
  position: fixed;
  bottom: 5px;
  right: 5px;
  opacity: .5;
}

Inline style (alternative)

<style type="text/css">
  #watermark { display: none; }
  @media print {
    #watermark {
      display: block;
      width: 150px;
      position: fixed;
      bottom: 5px;
      right: 5px;
      opacity: .5;
    }
</style>

---

Related Topics