andy's php projects
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister   ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
Script and site usage:
All of the scripts on this site are provided free for non-commerical, personal or non-profit use. If you find these scripts useful to you, appreciate the free support, or are just an all round nice person, then why not donate a little dosh? If you wish to use any of these in a commercial system, please refer to the payment plan.


Masks using jpeg/bmp/gif images

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    php.amnuts.com Forum Index -> Image Mask
View previous topic :: View next topic  
Author Message
hunnebal
Newbie


Joined: 06 Mar 2004
Posts: 6

PostPosted: Mon Mar 08, 2004 12:01 am    Post subject: Masks using jpeg/bmp/gif images Reply with quote

Hi Andy, sorry I have so much question.

If I'd like to use a mask, e.g. a nice image of an empty frame. Do I have to have a predetermined size of image/frame combination?

Is it possible to use the same frame/mask for many pictures for different sizes where the mask will resize according to the size of the pictures? Will the bitmap mask image resolution will degrade? Thanks
Back to top
View user's profile Send private message
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Mon Mar 08, 2004 6:47 am    Post subject: Re: Masks using jpeg/bmp/gif images Reply with quote

Hi hunnebal, and welcome to the board!

hunnebal wrote:
If I'd like to use a mask, e.g. a nice image of an empty frame. Do I have to have a predetermined size of image/frame combination?


I think you misunderstand the purpose of the image mask class a little. A mask is a black & white image (or shades of gray) which, when applied over the top of another image, will show that second image through the pure black portions of the mask and not show anything through through the pure white portions of the mask. Think of it as cutting a hole in the middle of a piece of paper, and putting that paper on your desk... You can see prt of your desk through the hole - the 'black' - and not see anything hidden by the paper - the 'white'.

The purpose of this class isn't to overlay another image on top of your original one, such as putting a 'frame' around the other image.

However, the results you want could be achieved fairly easily by following similar overlaying patterns as the image mask class uses.

hunnebal wrote:
Is it possible to use the same frame/mask for many pictures for different sizes where the mask will resize according to the size of the pictures? Will the bitmap mask image resolution will degrade?


If you take a bitmap image and make it much larger than the original size, you will always see lose in quality. Usually it's much better to start large and shrink down. You will still get image degradation, but the quality will be much better.

The class will allow you to use the same mask image on as many images as you want, and it has the abaility to resize the mask to the size of the image (though if you have a square mask and an oblong image then you'll find the mask will stretch out of proportion). All of that can be seen in the demo area of the script.

Regards,

Andy
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
V@no
Light Poster


Joined: 10 Apr 2003
Posts: 30

PostPosted: Thu May 27, 2004 6:12 pm    Post subject: Re: Masks using jpeg/bmp/gif images Reply with quote

amnuts wrote:
A mask is a black & white image (or shades of gray) which, when applied over the top of another image, will show that second image through the pure black portions of the mask and not show anything through through the pure white portions of the mask.
and what happend with the shades of gray?

another question, is there any chanse modify this class to do nothing with other colors of the mask image and just put them on the final image?
that would make possible add a border to the image around the mask edges...
Back to top
View user's profile Send private message Visit poster's website
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Fri May 28, 2004 4:33 am    Post subject: Reply with quote

Shades or gray give you that level of opacity.

Depending on the shade of gray it gives you opacity to the colour below it. So if the gray is closer to white, you'll see more of your underlying image. If it's closer to black you'll see more of your specified background colour.

Try out the 'frame.png' on the demo page and you'll see what I mean; it has shades of gray in it's borders.

http://php.amnuts.com/demos/image-mask/

As for the overlay - real easy! I actually extended the dropshadow class because I wanted to mix it in with image resizing, but here's the main gist of it:

PHP:
<?php

require_once(dirname(__FILE__) . '/class.dropshadow.php');

class 
imageOverLay extends dropShadow
{
    function 
overlay($overlay)
    {
        if (@
file_exists($overlay)) {
            
$o imagecreatefrompng($overlay);
            
$isx imagesx($o);
            
$isy imagesy($o);
            
imagealphablending($otrue);
            
$this->resizeToSize($isx$isy);
            
imagealphablending($this->_imgFinaltrue);
            
imagecopyresampled($this->_imgFinal$o0000$isx$isy$isx$isy);
        }
    } 
}

?>


Now remember; that code above was for my own personal use and so it's not perfect (but it suits my needs!)... The overlay doesn't resize (like the mask can) or anything like that. I had a specific size to use and so didn't make it 'distributable'. I'll probably write a full extension (or upgrade) the image mask class to add this ability.

This is what my overlay looks like (png with transparency - so use a decent browser to see it in all it's glory!) :



and here are a couple examples of images taken from 1600x1200 down to 100x75 (cropped if needs be) and then the overlay is applied:



Do you like? Smile

Andy


Last edited by amnuts on Wed Jul 28, 2004 4:33 am; edited 1 time in total
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
V@no
Light Poster


Joined: 10 Apr 2003
Posts: 30

PostPosted: Fri May 28, 2004 7:19 am    Post subject: Reply with quote

amnuts wrote:


and here are a couple examples of images taken from 1600x1200 down to 100x75 (cropped if needs be) and then the overlay is applied:



Do you like? Smile

Andy
wow! Shocked
Back to top
View user's profile Send private message Visit poster's website
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Fri May 28, 2004 7:58 am    Post subject: Reply with quote

V@no wrote:
wow! Shocked


I'll take that as a good thing. Wink

Btw; I like your sig - nicely generated!
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
mmjaeger
Light Poster


Joined: 22 Oct 2004
Posts: 25

PostPosted: Fri Oct 29, 2004 10:15 am    Post subject: overlay class Reply with quote

V@no wrote:
amnuts wrote:


and here are a couple examples of images taken from 1600x1200 down to 100x75 (cropped if needs be) and then the overlay is applied:



Do you like? Smile

Andy
wow! Shocked


did anybody figured out how to use this overlay class?

can't figure it out, but I'd love to use it.

thanks in advance for your instructions.
Back to top
View user's profile Send private message
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Tue Nov 02, 2004 5:20 am    Post subject: Reply with quote

I figured it out! Wink

Have you tried using the small extension class I demonstrated above? What have you tried? A little information goes a long way... Smile
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
mmjaeger
Light Poster


Joined: 22 Oct 2004
Posts: 25

PostPosted: Tue Nov 02, 2004 10:34 am    Post subject: Reply with quote

amnuts wrote:
I figured it out! Wink

Have you tried using the small extension class I demonstrated above? What have you tried? A little information goes a long way... Smile


this is basically what I have tried so far:

Code:
require_once(dirname(__FILE__) . '/class.resize.php');   
class imageOverLay extends dropShadow {
    function overlay($overlay) {
        if (@file_exists($overlay)) {
            $o = imagecreatefrompng($overlay);
            $isx = imagesx($o);
            $isy = imagesy($o);
            imagealphablending($o, true);
            $this->resizeToSize($isx, $isy);
            imagealphablending($this->_imgFinal, true);
            imagecopyresampled($this->_imgFinal, $o, 0, 0, 0, 0, $isx, $isy, $isx, $isy);
        }
    }
}

 $ds = new dropShadow(true);
 $ds->loadImage($s);
 $ds->overlay(overlay.png);

    header('Content-type: image/jpeg');
    if ($b == 1) {
        $colour = (isset($c)) ? $c : 'ffffff';
        $ds->applyShadow($colour);
        $ds->showShadow('jpg', 80);
    } else {
        $ds->showFinal('jpg', 80);
    }     



still couldn't get it to do anything so far. as you see, I'm pretty stupid at things like that.

By the way, I was wondering whether this function or similar could also be used to put a watermark image (e.g. a logo) onto an existing image or would it make more sense to use the mask function?

Thanks again for your input
Back to top
View user's profile Send private message
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Thu Nov 04, 2004 6:04 am    Post subject: Reply with quote

mmjaeger wrote:


this is basically what I have tried so far:

Code:
require_once(dirname(__FILE__) . '/class.resize.php');   
class imageOverLay extends dropShadow {
    function overlay($overlay) {
        if (@file_exists($overlay)) {
            $o = imagecreatefrompng($overlay);
            $isx = imagesx($o);
            $isy = imagesy($o);
            imagealphablending($o, true);
            $this->resizeToSize($isx, $isy);
            imagealphablending($this->_imgFinal, true);
            imagecopyresampled($this->_imgFinal, $o, 0, 0, 0, 0, $isx, $isy, $isx, $isy);
        }
    }
}

 $ds = new dropShadow(true);
 $ds->loadImage($s);
 $ds->overlay(overlay.png);

    header('Content-type: image/jpeg');
    if ($b == 1) {
        $colour = (isset($c)) ? $c : 'ffffff';
        $ds->applyShadow($colour);
        $ds->showShadow('jpg', 80);
    } else {
        $ds->showFinal('jpg', 80);
    }     



I'm going to assume that 'class.resize.php' is the dropshadow class that you've savwed with a different filename. Where does '$s' come from? What's in it? You need to have the filename in quotes, so this:

$ds->overlay(overlay.png);

should be this:

$ds->overlay('overlay.png');

and make sure you give the full path name is the overlay image isn't in the same directory the PHP file is.

You also turned on debugging with the dropShadow instantiation; did it report anything?

mmjaeger wrote:
I was wondering whether this function or similar could also be used to put a watermark image (e.g. a logo) onto an existing image or would it make more sense to use the mask function?


For watermarking, try checking out the PHP function imagecopymerge: http://uk.php.net/manual/en/function.imagecopymerge.php
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
olfudydudy
Newbie


Joined: 12 Oct 2004
Posts: 10
Location: Atlanta, GA

PostPosted: Fri Jan 28, 2005 3:27 pm    Post subject: Reply with quote

Andy,
Greetings from Atlanta.
Just wanted to say the overlay class extension is GREAT. I figured it out without much trouble. I must be getting better at this. Very Happy I made the overlay pic into a square, tho, for my thumbnails. I also am using the crop interface. That is really neat. Anyway, back to the overlay, the script I use is the following:

Code:

<?php

  require "class.dropshadow.php";
class imageOverLay extends dropShadow
{
    function overlay($overlay)
    {
        if (@file_exists($overlay)) {
            $o = imagecreatefrompng($overlay);
            $isx = imagesx($o);
            $isy = imagesy($o);
            imagealphablending($o, true);
            $this->resizeToSize($isx, $isy);
            imagealphablending($this->_imgFinal, true);
            imagecopyresampled($this->_imgFinal, $o, 0, 0, 0, 0, $isx, $isy, $isx, $isy);
        }
    }
}

 $image=$_GET['image'];
 $w=$_GET['w'];
 $h=$_GET['h'];

 $ds = new imageOverLay(FALSE);
 $ds->loadImage(dirname(__FILE__)."\\".$image);
 $ds->resizeToSize($w,$h);
 $ds->overlay("overlaysq.png");
 $ds->showFinal('jpg',70);
?>


The php program would use it like this:

Code:
print "<img src=\"droptestv.php?image=$sub\\$pic&w=100&h=100\" border='0'></img>";

Where $sub is the subdirectory, $pic is the photo file name, and w and h are the width and height in pixels. I have a working version of all this on my website at
http://www.gaclarke.com/andystuff/drop_crop_demo.php
The login is "guest" with no password. Feel free to try it out and let me know what you think. If you click on "Large Photos" you will see the drop shadow effect.
Keep up the good work.
George
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Tue Feb 01, 2005 4:03 am    Post subject: Reply with quote

Great job, George!

I'm glad you like the overlay! Smile It works well with small thumbnails, doesn't it? Though as slow as anything when trying to apply it to large images; don't know if you've tried that.

Have you tried any other types of overlays, or do you like that one?

I've been playing around trying some other things recently which may help in creating a fuller image class. It's a lot of fun! For example, I can take this image:

http://amnuts.homedns.org/oneaday/photos/full/2005-01-22.jpg

Use the dropshadow class to resize, then the cropping interface, then use the image functions class to sepia tone and then do various overlays, to product an image like this:

http://amnuts.homedns.org/oneaday/2005-01-22

Keep up the good work yourself! Smile

Andy
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    php.amnuts.com Forum Index -> Image Mask All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group