How to "Frame" an image

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
benhanks040888
Forum Newbie
Posts: 3
Joined: Fri Oct 17, 2008 4:03 am

How to "Frame" an image

Post by benhanks040888 »

Hi all, I want to ask how to frame an image. The frame will be generated from an image too, like this.

Image

The question is:
From the frame preview above, can i repeat the pattern (or at least the color) so that it frames the image completely with no white space? For now, I'm creating a full frame image like this with photoshop using the frame preview above which I repeat all over the frame.

Image

And the result will be something like this, but I don't want the white space at all.

Image

The steps to frame the image are as follow:
1. First, the user uploads an image
2. After that, when they click on the frame preview above, the image will be copy and resampled using imagecopyresampled function to the full frame image. Of course, if the image is bigger than the frame, the program will resize the image while keeping its proportion, and if it is smaller, it doesn't get stretched, but positioned in the center.

The problem is, I have to frame the image without any white spaces. I know I can do it with colors, and I've tried it ve(framing an image with colors), but how do I frame an image with the frame preview image above? Since if I use full frame image, it will be in a fixed resolution, eg 440x320 pixel, and the uploaded image will have to adjust with the full frame image, while what I desire is the other way, the frame will have to adjust with the uploaded image.

Thanks.
User avatar
aceconcepts
DevNet Resident
Posts: 1424
Joined: Mon Feb 06, 2006 11:26 am
Location: London

Re: How to "Frame" an image

Post by aceconcepts »

Take a look at some CSS styles for this.

Using CSS you can put borders aroung practically anything.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: How to "Frame" an image

Post by califdon »

Look into the border property of an image.
benhanks040888
Forum Newbie
Posts: 3
Joined: Fri Oct 17, 2008 4:03 am

Re: How to "Frame" an image

Post by benhanks040888 »

I know that we can put borders around an image using CSS, but the border has to be colors, while I want the border to be generated from image.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: How to "Frame" an image

Post by califdon »

benhanks040888 wrote:I know that we can put borders around an image using CSS, but the border has to be colors, while I want the border to be generated from image.
I think you would have to do some preprocessing, determining each image's dimensions, then using them to create a custom frame for every image. You might be able to do it using nested <div> elements with a background image, the dimensions of both <div>s based on the dimensions of the image. I would question whether it's worth the effort, but that's just my reaction.
benhanks040888
Forum Newbie
Posts: 3
Joined: Fri Oct 17, 2008 4:03 am

Re: How to "Frame" an image

Post by benhanks040888 »

it's my office project, so i think I have to do it, like it or not. I've thought about using divs too, however, this will not only have frame, but also have mats (2 levels of mats), so basically, there are 3 layers of "borders" (1 for frame, 2 for mats, though mats are optional)
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Re: How to "Frame" an image

Post by onion2k »

It's pretty simple using GD. You'd need to use 3 images though ... one for the corners, another for the horizontal sides, and a third for the vertical sides. Create a new image (with imagecreatetruecolor() ) that's the same dimensions as the original plus twice the border width, then copy the original image to the middle of the new image, and copy the border images into the 'frame' around the sides ... all using imagecopy() obviously.

I did something similar on my old drop shadow thumbnail code ... http://www.phpgd.com/scripts.php?script=24
User avatar
aceconcepts
DevNet Resident
Posts: 1424
Joined: Mon Feb 06, 2006 11:26 am
Location: London

Re: How to "Frame" an image

Post by aceconcepts »

Although it's not exactly what you're looking for, it will no doubt give you some insight into how you could approach it using CSS

http://www.dynamicdrive.com/style/cssli ... p-shadows/
Post Reply