HowTo: create a gradient 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
User avatar
-TomJ-
Forum Newbie
Posts: 4
Joined: Mon Feb 27, 2006 7:40 am
Location: Hoogland, the Netherlands
Contact:

HowTo: create a gradient image

Post by -TomJ- »

I am trying to create a web page with a gradient colour as background. Since I wanted the colour to be easily changeable, I have been trying to do so by creating a css stylesheet on the fly.
I recently learned that using php it should be possible to create a gradient image on the fly.

Basically, I want a class where the image is created, so I can create an instance of that class, with parameters like Start colour, Stop colour, Start position-x, Start position-y, Width, Height.
  • Is there anyone who would have any suggestions?
  • Is there a tutorial that addresses this subject?
  • Would anyone know of the existence of a class that does what I want?
  • Would anyone know where I could inquire further?
Thx
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post by onion2k »

I think there's a gradient image class in http://www.PHPclasses.org somewhere.

EDIT: Here we go.. http://phpclasses.fonant.com/browse/package/1530.html
User avatar
-TomJ-
Forum Newbie
Posts: 4
Joined: Mon Feb 27, 2006 7:40 am
Location: Hoogland, the Netherlands
Contact:

Post by -TomJ- »

I found the function and installed it. But now I find I don't know how to handle it.

Code: Select all

<?php
require "Systools\class.gradient_image.php";

$fade_from = "#000000";  // Start colour in hex
$fade_to   = "#0000FF";  // Stop colour inhex
$steps     = 32;         // Number of gradient steps
$width     = 320;        // Image Width 
$height    = 240;        // Image height

$gradient = new gradient_image($fade_from, $fade_to, $steps, $width, $height);
$im = $gradient->createImage(true);
$gradient->createPNG($im, true);
?>
This is the code that creates the image. My limited php knowledge assumes that the variable $im will contain the image, but when I type the following code in my page

Code: Select all

<img src="<?php $gradient->createPNG($im,true);?>">
I see in IE the MissingImage icon, and in FF I need to revert to the source to find the followng error:
Warning: Cannot modify header information - headers already sent by (output started at C:\Documents and Settings\....\Wrapper02.php:6) in C:\Documents and Settings\....\Systools\class.gradient_image.php on line 149
I also tried <img src="<?php $im;?>"> but that doesn't help either.

The downloaded stuff also contain an example calle image.php: when I run that in my browser, a beautifull gradient image is shown. So the class that calculates the image, is working fine: it is my way of addressing / using it.

So basically I have the next two questions:
  • How do I refer to the created image in my html?
  • What do I have to change to stop getting errors about header information?
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post by onion2k »

As you say.. image.php creates the image. You need to put that into the img tag..

Code: Select all

<img src="image.php">
Where image.php is the script that makes the gradient. Basically, image.php makes an image .. so you need to treat it as if it's an image.

If you want to pass colors to it, use image.php?color1=ff0000&color2=0000ff .. then modify the image gradient class to use those $_GET variables.
User avatar
-TomJ-
Forum Newbie
Posts: 4
Joined: Mon Feb 27, 2006 7:40 am
Location: Hoogland, the Netherlands
Contact:

Post by -TomJ- »

This easy? Woow!

I guess I am able now to make the image.php modifyable using parameters as you suggested.

Thx
Post Reply