Beginner PHP Tutorial - 163 - Watermarking Images Part 3 Video Lecture | PHP for Absolute Beginners: From Novice to PHP Master - Web Development

okay so the first parameter we need to
feed in is the image itself which we've
created up here with the name image so
let's just load that in first of all
okay so the next parameter we need to
give it is the watermark file so
essentially what we're saying is put
this on top of this
so we're saying put the watermark on top
of this image so there the first two
parameters easy to remember the next of
them is the obviously the position of
the watermark so that's x and y remember
we created our X variable here and our Y
variable here which is minus 10 pixels
from the bottom and the right in the
very corner now we need the is that so
this is the the position of the
watermark the next is the destination
source which not the destination source
sorry the X&Y coordinate of the source
point which we don't need to worry about
in this case we can set that to zero the
reason being is that we're starting at
zero zero in fact earlier I said that
zero starts from here and many apologies
its from here okay so we're saying we're
sort of saying zero minus ten in words
type thing if your own oh wait I'm not
actually sure where the corner putts
start point anyway so zero zero for this
bottom corner and we're going in ten
okay so the next is the watermark width
and the watermark height so this is very
important obviously
so water mark underscore width which we
determined earlier and water mark
underscore height which we also
determined earlier and put into these
variables okay so the last one is the
opacity of the watermark now like I said
I want this at a twenty percent opacity
the maximum or the minimum value is zero
for this which would render it sort of
invisible and the maximum is a hundred
so I'm going to set this to twenty so
it's going to give us a nice of fading
image okay so that's the image copy
merge function all done it's quite
harmful with all the parameters we need
to give into it but now we should have
achieved
we won so the last function we need to
supply is the image JPEG function and
what this is going to do is it's going
to actually put the image onto the page
so remember earlier we changed our
header file to an image JPEG now what we
need to do is actually process this
image onto the page so I'm just going to
supply with the image file there which
is what we supplied earlier and we've
copied a watermark onto this so now
hopefully when we supply a source file
this should work let's just create an
error message at the end of here just
for purposes and our own purposes no
source supplied so let's go into our
browser and just go over to generate dot
PHP on its own and we should have
received no source supplied oh no we
haven't obviously because we've sour our
our content type that's just me being a
bit stupid so okay let's um let's just
come onto our generator PHP file okay
now let's first supply our source in so
I'm going to say source equals phone
JPEG so as soon as I do this this
the phone JPEG file will be read in by
this the source will become phone dot
JPEG and the rest of our code should
process so fingers crossed that this is
going to work okay yet so it's worked we
have successfully merged with a 20%
opacity our logo here on to our main
image so let's just fill around with
this and I'll explain for us to do a
hundred opacity you can see that this
has come and basically you can't see
through it so that's something that you
could change another thing that you
could change you say change these values
let's go from minus 100 and we'll see
that our our watermark comes in words
more so 10 is obviously 10 it's probably
good when you could go as those two I
guess or even zero to have it on the
very outside of the page but 10 I just
played around with it earlier and
I thought was a nice whip away obviously
you can change your watermark you are
not limited to PNG files but I recommend
you probably use these anyway and just
generally have a play around I mean you
can you can specify different settings
things like that we we've already looked
at what each function does and why we've
given a variable particular value or why
we've created specific things in
specific places so yeah that's basically
watermarking now what we want to do is
this generate PHP file exists solely as
an image so you obviously don't want to
you know do this to show this to your
users or anything but what you want to
do is show this from an index index file
now we're going to do this and then
we're going to have a look at saving out
our generated file as well generated
image rather so in the source I can type
in generate dot PHP sorry so we can
create this PHP file inside this HTML
element in the image element as as an
image so even though it's a PHP file it
now exists as an image because obviously
we've changed our header our content
type at the top so now we can say source
equals phone's jpg so this is what you
would do if you wanted to just display a
watermark image on the fly if you like
let's go over to index dot PHP you see
how this is moved in now we can grab it
we can copy it we can paste it in things
like that however this is useful in some
instances but if you were were to say
let's give an example you were you were
allowing file uploads and you are
allowing users to upload JPEG images
well you might want to do somewhere in
your upload process is run this run this
generate PHP file and you might want to
read in the source file but then all you
want to do is you might not want to
output it to the screen you might want
to save this JPEG or overwrite it
so what we essentially do is we create a
new file with the merge things we don't
just want to output it to the user so
how do we go about around here
saving our file rather than just
displaying it out well the solution is
simple we don't actually need to delete
anything or create any new functions but
we can take take advantage of it
additional parameters that this
image/jpeg function allows us so let's
just open and see what we've already got
here we've got logo dot PNG and we've
got phone dot PNG we don't have a
combined version of the two these two
both correspond to their own and their
own rights they the logo is the logo the
phone is the picture of the phone
however if we just stick a comma in here
and we specify where we want our file to
be written to and what we want to call
the file then we can create a new file
from this so let's think logically about
this if the if the name of the file is
to be called source at the moment it's
called phone jpg we want to name it
something similar so source but then we
want to append on what's phone its
source
jpg we could say dot watermark dot jpg
for example so we've got will now have
phone jpg watermark jpg or even
underscore watermark drop jpg whatever
it doesn't really matter you can call it
the original file in it or I think it'll
overwrite itself anyway so now let's
have a look what happens when we run our
index dot PHP oh okay
okay maybe not let's just check inside
our room we don't want that let's just
check inside here okay yeah so we've got
phone jpg dot watermark jpg let's have a
look at that in our browser so we go
over to phone jpg which is the original
by the way dot watermark dot jpg okay so
yeah it's saved it hasn't displayed out
to us and but this is obviously again a
perfect example of why you might not
want to display it to your user but you
might want to just watermark images as
you upload them so this is a great
function to use if you were to be doing
something like that so you know
uploading a file allowing your users to
upload a file you can automatically
create a watermark on it save it and
then reference back to the filename in
whatever methods you choose so this is
basically being watermarking images with
GD library and site PHP have a play
around with it see what you can do