Add border to image in PHP

Question

I want to improve one of my Facebook apps by allowing the users to apply border styles to their images. I am not exactly sure how this can be done, but hopefully someone here will be able to help. The application is written in PHP. I originally thought that I would be able to create an image with just the border, a few pixels wider and taller than the image I wanted to add the border to, then just merge the two images, but that didn't work.

Any help would be great, and rewarded with your name and Stackoverflow profile image postedon the Credits page of the app.

Answer 1

Try putting the background image in the CSS background property.

How about some code using random images from google searches?

<div id="myWrapper" >
  <img src="http://www.iconarchive.com/icons/rokey/the-blacy/128/secret-smile-icon.png" id="myImage" />
</div>
<style>
    #myWrapper {
    background-image: url(http://images.clipartof.com/small/210747-Royalty-Free-RF-Clipart-Illustration-Of-A-Diamond-Plate-Border-Frame-Around-Blank-White-Space.jpg);
    width: 450px;
    height: 450px;
}

#myImage {
    margin: 160px 160px;
}
</style>

---

Note: I don't claim these images. I'm just saying this cos somebody's gonna bitch. Watch and see ;)

---

EDIT

I see now however that maybe he does just want to add a style as another poster suggested. So now we're back to asking the OP does he mean how does he store user preferences for images and then dynamically add that style onto an image as it's posted from the app?

I guess that would call for an inline style wouldn't it? ;)

myImageSource = "<img src='".imgSrc."' style='border: 2px solid ".imgBorderColor.";'/>";

Answer 2

Assuming you're using GD to create the images, you can use imagerectangle() to put a border around the image. PHP.net has a great example: http://us2.php.net/manual/en/function.imagerectangle.php

Answer 3

@drachenstern: CSS is a good idea, but how would the background help? CSS has a border property that can be used. ;) img.someclass { border: 2px solid black; }