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.cycletouris t.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.c om/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.cycletouris t.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.c om/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 (imagecreatefro mjpg) and the png watermark
(imagecreatefro mpng), then combine them with either imagecopy,
imagecopyresamp led or some other imagecopy* function that works best for
you. Just go ahead and try them.

--
Ra*********@gma il.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 (imagecreatefro mjpg) and the png watermark
(imagecreatefro mpng), then combine them with either imagecopy,
imagecopyresamp led 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.com from 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 (imagecreatefro mjpg) and the png watermark
(imagecreatefr ompng), then combine them with either imagecopy,
imagecopyresam pled 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.cycletouris t.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_wa termark($src, $dest, $png=0)
{
// use less than 100% opacity in imagecopymerge to improve the appearance
$pct = 70;

if ($png)
$watermark = imagecreatefrom png('cycletouri st_x2.png');
else
$watermark = imagecreatefrom gif('cycletouri st_x2.gif');

$watermark_widt h = imagesx($waterm ark);
$watermark_heig ht = imagesy($waterm ark);

$image = imagecreatetrue color($watermar k_width, $watermark_heig ht);
$image = imagecreatefrom jpeg($src);
$size = getimagesize($s rc);

// center the watermark
$dest_x = ($size[0] - $watermark_widt h)/2;
$dest_y = $size[1]/2 - $watermark_heig ht/2;

// lay it on 3 times - upper, middle, and lower
imagecopymerge( $image, $watermark, $dest_x, $dest_y, 0, 0,
$watermark_widt h, $watermark_heig ht, $pct);

imagecopymerge( $image, $watermark, $dest_x,
$dest_y/2 - $watermark_heig ht/2, 0, 0, $watermark_widt h,
$watermark_heig ht, $pct);

imagecopymerge( $image, $watermark, $dest_x,
($dest_y + $dest_y/2) + $watermark_heig ht/2, 0, 0,
$watermark_widt h, $watermark_heig ht, $pct);

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

imagejpeg($imag e);
imagedestroy($i mage);
imagedestroy($w atermark);
}

$src = '../Scenes/St_Peters_Basil ica.jpg';

display_with_wa termark($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 (imagecreatefro mjpg) and the png watermark
(imagecreatefr ompng), then combine them with either imagecopy,
imagecopyresam pled 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
imagecopyresize d. 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*********@gma il.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 -
dynamicall y?

>>Yeah, I've done this. What you do is you open image handles to both
files, the original image (imagecreatefro mjpg) and the png watermark
(imagecreatef rompng), then combine them with either imagecopy,
imagecopyresa mpled 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.cycletouris t.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
imagecopyresamp led because I want to re-size the watermark to fit the
image, and this produces better results than imagecopyresize d.

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.com from 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
imagecopyresam pled because I want to re-size the watermark to fit the
image, and this produces better results than imagecopyresize d.

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.com from 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
imagecopyresam pled because I want to re-size the watermark to fit the
image, and this produces better results than imagecopyresize d.

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.c om/article/watermark-images-php... and reworked
some parts.

display_with_wa termark.php
usage:
<img src="display_wi th_watermark.ph p?src=<?php echo
$path_to_source _image ?>">

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

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

$watermark_widt h = imagesx($waterm ark);
$watermark_heig ht = imagesy($waterm ark);

$image = imagecreatetrue color($watermar k_width, $watermark_heig ht);
$image = imagecreatefrom jpeg($src);
$size = getimagesize($s rc);

// center in source image
$dest_x = ($size[0] - $watermark_widt h)/2;
$dest_y = $size[1]/2 - $watermark_heig ht/2;

// place in top third of image
imagecopyresamp led($image, $watermark, $dest_x,
$dest_y/2 - $watermark_heig ht/2, 0, 0, $watermark_widt h,
$watermark_heig ht, $watermark_widt h, $watermark_heig ht);

// centerd and half sized
imagecopyresamp led($image, $watermark,
$dest_x + $watermark_widt h/4, $dest_y + $watermark_heig ht/4,
0, 0, $watermark_widt h/2, $watermark_heig ht/2,
$watermark_widt h, $watermark_heig ht);

// place in bottom third
imagecopyresamp led($image, $watermark, $dest_x,
$dest_y + $dest_y/2 + $watermark_heig ht/2, 0, 0,
$watermark_widt h, $watermark_heig ht, $watermark_widt h,
$watermark_heig ht);

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

imagejpeg($imag e);

imagedestroy($i mage);
imagedestroy($w atermark);
?>

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

[Geoff Berrow]

Message-ID: <39************ *************** ***@comcast.com from 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.c om/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/