/    Sign up×
Community /Pin to ProfileBookmark

PHP Image Generation Help Needed

Hi all.

I’m trying to generate a “play button” using only php.

Better explained, what I need is to generate a transparent png of an equilateral triangle (turned on it’s side).

I have no idea where to begin. I’ve done some php based opening and resizing of images but never this.

The more you’re comfortable contributing, code wise, the better off I’ll be.

Any takers?

to post a comment
PHP

10 Comments(s)

Copy linkTweet thisAlerts:
@aj_nscDec 09.2009 — PHP has a pretty great set of tools to manipulate/create images. Take a look at all the functions you can use here:

http://ca3.php.net/manual/en/ref.image.php

Divide what you need to do in steps (looks like you've already done it - make a triangle with a transparent background and turn it on it's side), and then find the functions to do what you need to do.

They're all in the page I sent you, you've just got to look for them.

The only thing you're likely to have difficulty with because you're not too familiar with the PHP GD library is the transparency issue, in which case I can give you some hints.

1) create an image - imagecreatetruecolor()

2) create a transparent 'color' - imagecolorallocatealpha()

3) fill the image with the transparent 'color' - imagefill()

4) create a color for your rectangle - imagecolorallocate()

5) create your triangle - imagefilledpolygon()

6) turn it on its side - imagerotate()

Good luck.
Copy linkTweet thisAlerts:
@robindeanauthorDec 09.2009 — Thanks!

I'm going down the list one at a time and will post questions as things develop.
Copy linkTweet thisAlerts:
@SrWebDeveloperDec 09.2009 — If TEXT is involved instead of the triangle:

Are you sure you need to generate the button graphic, or just the text overlay i.e. the word, "Play" in whatever font/size/color you want? If the latter, use your standard graphics editor or search the Internet for a blank button that looks exactly like you want it, without the text. Then use the GD to overlay the text based on a true type font. If your site generates alot of buttons this way, then your code will use one of a few blank template images (or resize one) based on the text length, i.e. use small.png if 4 chars or less, medium.png if 5-12, etc.

Just thought I'd ask the obvious, might save you alot of work. If you intend to generate the button 100% no text, nevermind, and no need to even respond to this!

-jim
Copy linkTweet thisAlerts:
@aj_nscDec 09.2009 — In my above post, #4 should read create a color for your triangle.
Copy linkTweet thisAlerts:
@robindeanauthorDec 09.2009 — There won't be any text on it ... but you're inspired me to raise a different question.

Is it possible to upload a not-so-typical (one that people typically have to purchase in order to use) true-type font and make use of it via the gd library?

If so, I've bought many fonts that I'd like to work with.
Copy linkTweet thisAlerts:
@aj_nscDec 09.2009 — Absolutely. I've done this several times.

http://ca2.php.net/manual/en/function.imagefttext.php
Copy linkTweet thisAlerts:
@robindeanauthorDec 13.2009 — I'll start delving into the font related stuff upon finishing my image work. Thanks for the links!

As for the images, everything is going great! Thanks for the tips.

I do have a question about aliasing though.

In making my triangles (and other angular shapes) I'm noticing that the edges appear somewhat pixelated/jagged. The parameters and coordinates are all correct and it looks nice enough.

Is there a parameter that can "smooth" the edges? I think it's called aliasing but can't remember.
Copy linkTweet thisAlerts:
@thraddashDec 14.2009 — [CODE]imageantialias($image, true);[/CODE]

Use before you draw your lines.
Copy linkTweet thisAlerts:
@robindeanauthorDec 14.2009 — In research "imageantialias" I discovered that it only works for "imagecreatetruecolor". Assuming that there is no anti-aliasing alternative, I could sure use some help tweaking my function so that it makes use of "imagecreatetruecolor" only. The reason I was using "@imagecreate" was that it seems easier to manage transparency.

What do you all suggest?

My code:

[code=php]else if ($display == 'img') {
header("Content-type: image/png");
$f = $_GET['f'];
$w = $_GET['w'];
$h = $_GET['h'];
if ($f != null && $f != 'play' && $f != 'pause' && $f != 'eject') {
$t = substr($f, 0, -4).'_'.$w.'x'.$h.'.png';
if (file_exists($t)) header('location: '.$t);
else {
list($wo, $ho) = getimagesize($f);
$ip = imagecreatetruecolor($w, $h);
$img = imagecreatefrompng($f);
imagecopyresampled($ip, $img, 0, 0, 0, 0, $w, $h, $wo, $ho);
imagepng($ip, $t, 9);
imagepng($ip, null, 9);
}
} else {
if ($f == 'play' || $f == 'pause' || $f == 'eject') {$w = $pw; $h = $ph; $c = $cl; $t = 'bg/bg_'.$f.'_'.$c.'_'.$w.'x'.$h.'.png';}
else {
$c = strtolower($_GET['c']);
if ($w == $h) $t = 'bg/bg_'.$c.'.png';
else if ($w < $h) $t = 'bg/bg_hr_'.$c.'.png';
else $t = 'bg/bg_vr_'.$c.'.png';
}
if (file_exists($t)) header('location: '.$t);




else {
if ($f == 'play') {
if ($h % 2 != 0) {$pts = array(0, 0, 0, $h - 1, $w, $h / 2); $pg = 3;}
else {$pts = array(0, 0, 0, $h - 1, $w, $h / 2, $w, $h / 2 - 1); $pg = 4;}
}

else if ($f == 'eject') {
$pts = array(5,0, 0,7, 11,7, 6,0);
$pg = 4;
$bse = array(11,0, $w,11, 11,$h, 0,$h);
}

$img = @imagecreate($w, $h);

sscanf($c, "%2x%2x%2x", $r, $g, $b);
$fc = imagecolorallocate($img, $r, $g, $b);

if ($f == 'play' || $f == 'pause' || $f == 'eject') {
$bg = imagecolorallocate($img, 127, 127, 127);
imagefilledrectangle($img, 0, 0, $w-1, $h-1, $bg);

if ($f == 'play' || $f == 'eject') imagefilledpolygon($img, $pts, $pg, $fc);

if ($f == 'pause' || $f == 'eject') {

imagesetthickness ($img, $w *.25);

if ($f == 'pause') {
$m1 = $w * .3;
$m2 = $w * .7;
imageline ($img, $m1, 0, $m1, $h-1, $fc);
imageline ($img, $m2, 0, $m2, $h-1, $fc);
}

else imageline ($img, 0, $h-2, $w-1, $h-2, $fc);

}
imagecolortransparent($img, $bg);
}


else if ($w != $h) {
$a = imagecolorallocatealpha($img, 0, 0, 0, 127);
if ($w < $h) imagesetpixel($img, 0, 1, $a);
else if ($w > $h) imagesetpixel($img, 1, 0, $a);
}




// imagepng($img, $t, 9);
imagepng($img, null, 9);
}
}
}[/code]
Copy linkTweet thisAlerts:
@robindeanauthorDec 24.2009 — Now it's becoming a bit of a riddle.

In hopes of streamlining my code (a fragment of it, at least) I'm wondering if someone will "save" me from my blindness. I've been looking at my work so much that I can't think through it to shorten it.

I'm familiar with the phrase "if it ain't broke, don't fix it" but I'd like for the code to be as streamlined as possible.

Assuming that all of the below elements of my code are necessary, how can I shorten it so that it doesn't need to repeat any declarations?

Again, this is only a fragment of the functionality ...

[CODE]if ($f == 'play') {
$wss = $w * 10;
$hss = $h * 10;
$imgss = imagecreatetruecolor($wss, $hss);
$a = imagecolorallocatealpha($imgss, 0, 0, 0, 127);
imagefill($imgss, 0, 0, $a);
$c = imagecolorallocate($imgss, $r, $g, $b);
$pts = array(0,0, 0,$hss-1, $wss-1,$hss/2, $wss-1,$hss/2-1);
imagefilledpolygon($imgss, $pts, 4, $c);
$img = imagecreatetruecolor($w, $h);
imagesavealpha($img, true);
imagefill($img, 0, 0, $a);
imagecopyresampled($img, $imgss, 0, 0, 0, 0, $w, $h, $wss, $hss);
}
else if ($f == 'pause' || $f == 'eject') {
$imgsm = @imagecreate(5, 1);
$c = imagecolorallocate($imgsm, $r, $g, $b);
imagefill($imgsm, 0, 0, $c);
$a = imagecolorallocatealpha($imgsm, 0, 0, 0, 127);
imagesetpixel($imgsm, 0, 0, $a);
imagesetpixel($imgsm, 2, 0, $a);
imagesetpixel($imgsm, 4, 0, $a);
$img = @imagecreate($w, $h);
imagecopyresized($img, $imgsm, 0, 0, 0, 0, $w, $h, 5, 1);
if ($w % 5 != 0) {
$imga = @imagecreate($vcw, $h);
imagecopy($imga, $img, 0, 0, 0, 0, $vcw, $h);
$img = $imga;
}
if ($f == 'eject') {
$ga = 127;
$x = 0;
$cnt = 0;
while ($ga != 0) {
$rgb = imagecolorat($img, $x, 0);
$crs = imagecolorsforindex($img, $rgb);
$ga = $crs['alpha'];
if ($ga != 0) {
$cnt++;
$x++;
}
}
$bc = round($h * .8);
$bs = $h - $bc + $cnt;
$wss = $w * 10;
$hss = ($h - $bs) * 10;
$imgss = imagecreatetruecolor($wss, $hss);
$a = imagecolorallocatealpha($imgss, 0, 0, 0, 127);
imagefill($imgss, 0, 0, $a);
$c = imagecolorallocate($imgss, $r, $g, $b);
$pts = array($wss/2-1,0, 0,$hss-1, $wss-1,$hss-1, $wss/2,0);
imagefilledpolygon($imgss, $pts, 4, $c);
$img = imagecreatetruecolor($w, $h);
imagesavealpha($img, true);
imagefill($img, 0, 0, $a);
imagecopyresampled($img, $imgss, 0, 0, 0, 0, $w, $h - $bs, $wss, $hss);
imagefilledrectangle($img, 0, $bc, $w - 1, $h - 1, $c);
}
}[/CODE]
×

Success!

Help @robindean spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...