Ttransparent overlay watermark - on the fly?

[Chuck Anderson]

Is it possible to overlay a transparent watermark on an image -
dynamically?
I'd like the result to look like this example:
<http://www.cycletourist.com/temp/photo.php>

That is a bit of overkill, but you can see what I mean. The watermark
image (a png image) is included separately below the photo.

I tried using a class from phpclasses.org
<http://www.phpclasses.org/browse/package/1580.html...
but the result looks horrible. The transparency does not work.

I found one other method through Google,
<http://www.sitepoint.com/article/watermark-images-php>
but it did not work, either.

Can this kind of transparent overlay be done on the fly with GD lib?

--
*****************************
Chuck Anderson • Boulder, CO
http://www.CycleTourist.com
*****************************

[Rami Elomaa]

Chuck Anderson kirjoitti:

Is it possible to overlay a transparent watermark on an image -
dynamically?
I'd like the result to look like this example:
<http://www.cycletourist.com/temp/photo.php>

That is a bit of overkill, but you can see what I mean. The watermark
image (a png image) is included separately below the photo.

I tried using a class from phpclasses.org
<http://www.phpclasses.org/browse/package/1580.html...
but the result looks horrible. The transparency does not work.

I found one other method through Google,
<http://www.sitepoint.com/article/watermark-images-php>
but it did not work, either.

Can this kind of transparent overlay be done on the fly with GD lib?

Yeah, I've done this. What you do is you open image handles to both
files, the original image (imagecreatefromjpg) and the png watermark
(imagecreatefrompng), then combine them with either imagecopy,
imagecopyresampled or some other imagecopy* function that works best for
you. Just go ahead and try them.

--
Ra*********@gmail.com
"Olemme apinoiden planeetalla."

[j.l.l]

Rami Elomaa schrieb:

Chuck Anderson kirjoitti:

>Is it possible to overlay a transparent watermark on an image -
dynamically?

Yeah, I've done this. What you do is you open image handles to both
files, the original image (imagecreatefromjpg) and the png watermark
(imagecreatefrompng), then combine them with either imagecopy,
imagecopyresampled or some other imagecopy* function that works best for
you. Just go ahead and try them.

I've done one transparent overlay of two pictures, too, but found it a
bit tricky to do.

You have to be careful with using imagecopymerge. As i remember there is
a parameter to allow transparency to be used.

I wonder if different imagetypes can be used without any probs? Please
tell if you have tested it, i'm curious about it.

moido apinoiden planeetalta!

[Geoff Berrow]

Message-ID: <Yt******************************@comcast.comfro m Chuck
Anderson contained the following:

>Can this kind of transparent overlay be done on the fly with GD lib?

Yep.

www.ckdog.co.uk/watermark
--
Geoff Berrow (put thecat out to email)
It's only Usenet, no one dies.
My opinions, not the committee's, mine.
Simple RFDs http://www.ckdog.co.uk/rfdmaker/

[Chuck Anderson]

j.***@web.de wrote:

Rami Elomaa schrieb:

>Chuck Anderson kirjoitti:

>>Is it possible to overlay a transparent watermark on an image -
dynamically?

>Yeah, I've done this. What you do is you open image handles to both
files, the original image (imagecreatefromjpg) and the png watermark
(imagecreatefrompng), then combine them with either imagecopy,
imagecopyresampled or some other imagecopy* function that works best for
you. Just go ahead and try them.

I've done one transparent overlay of two pictures, too, but found it a
bit tricky to do.

You have to be careful with using imagecopymerge. As i remember there is
a parameter to allow transparency to be used.

I wonder if different imagetypes can be used without any probs? Please
tell if you have tested it, i'm curious about it.

moido apinoiden planeetalta!

Okay, thanks for all the help. I see now that the imagecopy....
functions do what I need. The only one that lets you adjust the
transparency of the overlaying image, though, is imagecopymerge.

One big problem is that I am having no luck with using a png for the
overlay. There is a background color, not transparency.

I've added more to the example page.
<http://www.cycletourist.com/temp/photo.php>

The top image is one I created in Paint Shop Pro by pasting the
transparent png over a photo image multiple times. I really like the
look of the transparency there.

The two gray boxes under the photo contain the png and gif images I am
using for the watermark. The background behind the watermark images is
set with CSS. The png version is 24 bit with alpha channel
transparency. The gif image had to be blended with some color so I
chose a light medium gray (which you can see on top of the background).
If you click on either of those you can see the respective Php generated
results.

Using a transparent gif for the watermark when generating the image with
Php looks shoddy in comparison to the one I made in Paint Shop Pro.

The png watermark is not even transparent ... and I don't know why. I
wonder if it would look better than the gif version, but I can't figure
out how to make it overlay and be transparent.

So, ... questions ....
1. Can I get results more like the image I created in Paint Shop Pro?
2. Why is the png not transparent when I use imagecopymerge (and will it
look better if I get it working)?

Here is the Php script I am using:

<?php
function display_with_watermark($src, $dest, $png=0)
{
// use less than 100% opacity in imagecopymerge to improve the appearance
$pct = 70;

if ($png)
$watermark = imagecreatefrompng('cycletourist_x2.png');
else
$watermark = imagecreatefromgif('cycletourist_x2.gif');

$watermark_width = imagesx($watermark);
$watermark_height = imagesy($watermark);

$image = imagecreatetruecolor($watermark_width, $watermark_height);
$image = imagecreatefromjpeg($src);
$size = getimagesize($src);

// center the watermark
$dest_x = ($size[0] - $watermark_width)/2;
$dest_y = $size[1]/2 - $watermark_height/2;

// lay it on 3 times - upper, middle, and lower
imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0,
$watermark_width, $watermark_height, $pct);

imagecopymerge($image, $watermark, $dest_x,
$dest_y/2 - $watermark_height/2, 0, 0, $watermark_width,
$watermark_height, $pct);

imagecopymerge($image, $watermark, $dest_x,
($dest_y + $dest_y/2) + $watermark_height/2, 0, 0,
$watermark_width, $watermark_height, $pct);

header('Content-Type: image/jpg');
header('Content-Disposition: inline; filename=' . $src);

imagejpeg($image);
imagedestroy($image);
imagedestroy($watermark);
}

$src = '../Scenes/St_Peters_Basilica.jpg';

display_with_watermark($src, $dest, 0); // 0 = gif watermark, 1 = png
?>

--
*****************************
Chuck Anderson • Boulder, CO
http://www.CycleTourist.com
*****************************

[Rami Elomaa]

j.***@web.de kirjoitti:

Rami Elomaa schrieb:

>Chuck Anderson kirjoitti:

>>Is it possible to overlay a transparent watermark on an image -
dynamically?

>Yeah, I've done this. What you do is you open image handles to both
files, the original image (imagecreatefromjpg) and the png watermark
(imagecreatefrompng), then combine them with either imagecopy,
imagecopyresampled or some other imagecopy* function that works best
for you. Just go ahead and try them.

I've done one transparent overlay of two pictures, too, but found it a
bit tricky to do.

You have to be careful with using imagecopymerge. As i remember there is
a parameter to allow transparency to be used.

I wonder if different imagetypes can be used without any probs? Please
tell if you have tested it, i'm curious about it.

Now I have to admit that it was over 4 years ago since I did the whole
watermarking thing, so I can't say I'm SURE it worked, but I don't
remember having any problems with it. It was just like I said: open two
image handles, one jpg, one png, then place the png on the jpg with
imagecopyresized. I found the original script I used back then and it
seemed very simple to begin with. I suppose I'd have to do some testing
with the script to see if it indeed worked like I'm thinking it did.

--
Ra*********@gmail.com
"Olemme apinoiden planeetalla."

[Chuck Anderson]

Chuck Anderson wrote:

j.***@web.de wrote:

>Rami Elomaa schrieb:

>>Chuck Anderson kirjoitti:
Is it possible to overlay a transparent watermark on an image -
dynamically?

>>Yeah, I've done this. What you do is you open image handles to both
files, the original image (imagecreatefromjpg) and the png watermark
(imagecreatefrompng), then combine them with either imagecopy,
imagecopyresampled or some other imagecopy* function that works best for
you. Just go ahead and try them.

I've done one transparent overlay of two pictures, too, but found it a
bit tricky to do.

You have to be careful with using imagecopymerge. As i remember there is
a parameter to allow transparency to be used

>.....

Okay, thanks for all the help. I see now that the imagecopy....
functions do what I need. The only one that lets you adjust the
transparency of the overlaying image, though, is imagecopymerge.

One big problem is that I am having no luck with using a png for the
overlay. There is a background color, not transparency.

I've added more to the example page.
<http://www.cycletourist.com/temp/photo.php>

The top image is one I created in Paint Shop Pro by pasting the
transparent png over a photo image multiple times. I really like the
look of the transparency there.

The two gray boxes under the photo contain the png and gif images I am
using for the watermark. The background behind the watermark images is
set with CSS. The png version is 24 bit with alpha channel
transparency. The gif image had to be blended with some color so I
chose a light medium gray (which you can see on top of the background).
If you click on either of those you can see the respective Php generated
results.

.....

So, ... questions ....
1. Can I get results more like the image I created in Paint Shop Pro?
2. Why is the png not transparent when I use imagecopymerge (and will it
look better if I get it working)?

[previous script deleted]

Okay, I finally found the answer(s) I needed to make this work.

First. For the watermark, you must use a 24 bit png (not 8 bit) - and
the best results, by far, are with alpha transparency. (A transparent
gif watermark works, but a transparent png produces much better quality.)

Second - Do *not* use imagecopymerge (with a transparent png
watermark). It "destroys" the transparency in the png. I chose
imagecopyresampled because I want to re-size the watermark to fit the
image, and this produces better results than imagecopyresized.

My new results are here - in the old same place:
http://www.cycletourist.com/temp/photo.php

--
*****************************
Chuck Anderson • Boulder, CO
http://www.CycleTourist.com
*****************************

[Geoff Berrow]

Message-ID: <5_******************************@comcast.comfro m Chuck
Anderson contained the following:

>Okay, I finally found the answer(s) I needed to make this work.

First. For the watermark, you must use a 24 bit png (not 8 bit) - and
the best results, by far, are with alpha transparency. (A transparent
gif watermark works, but a transparent png produces much better quality.)

Second - Do *not* use imagecopymerge (with a transparent png
watermark). It "destroys" the transparency in the png. I chose
imagecopyresampled because I want to re-size the watermark to fit the
image, and this produces better results than imagecopyresized.

Have you got some sample code?

--
Geoff Berrow (put thecat out to email)
It's only Usenet, no one dies.
My opinions, not the committee's, mine.
Simple RFDs http://www.ckdog.co.uk/rfdmaker/

[Chuck Anderson]

Geoff Berrow wrote:

Message-ID: <5_******************************@comcast.comfro m Chuck
Anderson contained the following:

>Okay, I finally found the answer(s) I needed to make this work.

First. For the watermark, you must use a 24 bit png (not 8 bit) - and
the best results, by far, are with alpha transparency. (A transparent
gif watermark works, but a transparent png produces much better quality.)

Second - Do *not* use imagecopymerge (with a transparent png
watermark). It "destroys" the transparency in the png. I chose
imagecopyresampled because I want to re-size the watermark to fit the
image, and this produces better results than imagecopyresized.

Have you got some sample code?

Sure. I have not taken the size of the src image into account yet. This
example was a test of concept. I also want to rotate the watermark, but
here's how it is now. I started with the code from here:
<http://www.sitepoint.com/article/watermark-images-php... and reworked
some parts.

display_with_watermark.php
usage:
<img src="display_with_watermark.php?src=<?php echo
$path_to_source_image ?>">

<?php
$src = $_GET['src'];

// my watermark image is a 24 bit png with alpha channel transparency
$watermark = imagecreatefrompng('your_watermark_image.png');

$watermark_width = imagesx($watermark);
$watermark_height = imagesy($watermark);

$image = imagecreatetruecolor($watermark_width, $watermark_height);
$image = imagecreatefromjpeg($src);
$size = getimagesize($src);

// center in source image
$dest_x = ($size[0] - $watermark_width)/2;
$dest_y = $size[1]/2 - $watermark_height/2;

// place in top third of image
imagecopyresampled($image, $watermark, $dest_x,
$dest_y/2 - $watermark_height/2, 0, 0, $watermark_width,
$watermark_height, $watermark_width, $watermark_height);

// centerd and half sized
imagecopyresampled($image, $watermark,
$dest_x + $watermark_width/4, $dest_y + $watermark_height/4,
0, 0, $watermark_width/2, $watermark_height/2,
$watermark_width, $watermark_height);

// place in bottom third
imagecopyresampled($image, $watermark, $dest_x,
$dest_y + $dest_y/2 + $watermark_height/2, 0, 0,
$watermark_width, $watermark_height, $watermark_width,
$watermark_height);

header('Content-Type: image/jpg');
header('Content-Disposition: inline; filename=' . $src);

imagejpeg($image);

imagedestroy($image);
imagedestroy($watermark);
?>

--
*****************************
Chuck Anderson • Boulder, CO
http://www.CycleTourist.com
*****************************

[Geoff Berrow]

Message-ID: <39******************************@comcast.comfro m Chuck
Anderson contained the following:

>Have you got some sample code?

Sure. I have not taken the size of the src image into account yet. This
example was a test of concept. I also want to rotate the watermark, but
here's how it is now. I started with the code from here:
<http://www.sitepoint.com/article/watermark-images-php... and reworked
some parts.

Thanks. My watermark script works fine but it's slow.

--
Geoff Berrow (put thecat out to email)
It's only Usenet, no one dies.
My opinions, not the committee's, mine.
Simple RFDs http://www.ckdog.co.uk/rfdmaker/