Page 1 of 1

How to "Frame" an image

Posted: Fri Oct 17, 2008 4:17 am
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.

Re: How to "Frame" an image

Posted: Fri Oct 17, 2008 6:51 am
by aceconcepts
Take a look at some CSS styles for this.

Using CSS you can put borders aroung practically anything.

Re: How to "Frame" an image

Posted: Fri Oct 17, 2008 5:23 pm
by califdon
Look into the border property of an image.

Re: How to "Frame" an image

Posted: Fri Oct 17, 2008 9:00 pm
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.

Re: How to "Frame" an image

Posted: Fri Oct 17, 2008 10:42 pm
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.

Re: How to "Frame" an image

Posted: Fri Oct 17, 2008 10:59 pm
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)

Re: How to "Frame" an image

Posted: Sat Oct 18, 2008 3:22 am
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

Re: How to "Frame" an image

Posted: Sat Oct 18, 2008 6:31 am
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/