Does anyone have a script to create a horizontal gradient (left to right) using PHP?

Question

Here's the current code I am using.

<? header("Content-type: image/png");
// example: <img src="gradient.php?height=600&width=100&start=00FF00&end=ff0000" />
$height=100;
$width=1;
$start='000000';
$end='FFFFFF';
extract($_REQUEST); // overwrite using vars from url
$start_r = hexdec(substr($start,0,2));
$start_g = hexdec(substr($start,2,2));
$start_b = hexdec(substr($start,4,2));
$end_r = hexdec(substr($end,0,2));
$end_g = hexdec(substr($end,2,2));
$end_b = hexdec(substr($end,4,2));
$image = @imagecreate($width,$height);
for($y=0;$y<$height;$y++){
    for($x=0;$x<$width;$x++){
     if($start_r==$end_r) $new_r = $start_r;

     $difference = $start_r-$end_r;
     $new_r = $start_r-intval(($difference/$height)*$y); 

     if($start_g==$end_g) $new_g = $start_g;

     $difference = $start_g-$end_g;
     $new_g = $start_g-intval(($difference/$height)*$y);     

     if($start_b==$end_b) $new_b = $start_b;

     $difference = $start_b - $end_b;
     $new_b = $start_b-intval(($difference/$height)*$y);

     $row_color = imagecolorresolve($image,$new_r,$new_g,$new_b);
     imagesetpixel($image,$x,$y,$row_color);
    }    
}
imagepng($image);
imagedestroy($image);
?>

The above code works perfect in making vertical (top to bottom) gradients but I'd like to be able to make horizontal ones as well. I have a very good understanding for PHP, but I don't deal with PHP image functions very often. If someone can help me and figure this out I'd really appreciate it!

Answer 1

should just be able to swap your width and height loops/values.

Answer 2

This code will work for vertical gradient and make it faster as well.

I have commented out useless code so you know what to delete.

for($x=0;$x<$width;$x++){
    /*if($start_r==$end_r) $new_r = $start_r;*/
    // ^^ the line above is useless, $new_r will be set below either way

    $difference = $start_r-$end_r;
    $new_r = $start_r-intval(($difference/$width)*$x); 

    /*if($start_g==$end_g) $new_g = $start_g;*/
    // ^^ the line above is useless, $new_g will be set below either way

    $difference = $start_g-$end_g;
    $new_g = $start_g-intval(($difference/$width)*$x);     

    /*if($start_b==$end_b) $new_b = $start_b;*/
    // ^^ the line above is useless, $new_b will be set below either way

    $difference = $start_b - $end_b;
    $new_b = $start_b-intval(($difference/$width)*$x);

    $new_color = imagecolorresolve($image,$new_r,$new_g,$new_b);
    // ^^ used to be $row_color

    for($y=0;$y<$height;$y++){
        imagesetpixel($image,$x,$y,$new_color);
    }    
}

Answer 3

Thanks go out to Gert!

Here is the final code I came up with, it's efficient, the images cache, and the file sizes are very friendly.

<? header("Content-type: image/png"); // example: <img src="gradient.php?width=100&start=00FF00&end=ff0000&type=x" />
$width = 1; $height=1; $start='000000'; $end='FFFFFF'; $type='x'; extract($_REQUEST);
$path = "gradients/".$start."-".$end."_".$width."x".$height."_".$type.".png";
if(file_exists($path)) echo file_get_contents($path);
else{
    $r1 = hexdec(substr($start,0,2)); $g1 = hexdec(substr($start,2,2)); $b1 = hexdec(substr($start,4,2));
    $r2 = hexdec(substr($end,0,2));   $g2 = hexdec(substr($end,2,2));   $b2 = hexdec(substr($end,4,2));
    $image = @imagecreate($width,$height);
    switch($type){
        case 'x': $d1 = 'height'; $d2 = 'width'; $v1 = 'y'; $v2 = 'x'; break;
        case 'y': $d1 = 'width'; $d2 = 'height'; $v1 = 'x'; $v2 = 'y'; break;
    }
    for($$v1=0;$$v1<$$d1;$$v1++){
        $r = $r1-intval((($r1-$r2)/$$d1)*$$v1); $g = $g1-intval((($g1-$g2)/$$d1)*$$v1); $b = $b1-intval((($b1-$b2)/$$d1)*$$v1);
        $color = imagecolorresolve($image,$r,$g,$b); for($$v2=0;$$v2<$$d2;$$v2++) imagesetpixel($image,$x,$y,$color);
    } imagepng($image,$path,1); imagepng($image,NULL,1); imagedestroy($image);
}?>

Variable $type can be x or y, and it would be in relation to your CSS sheet and what coordinate is repeating... Here are some examples:

<style type="text/css">
body{
        background:url(gradient.php?height=123&start=ABBABB&end=FFF000&type=x) repeat-x scroll top left; /* the &type=x' so the repeat is 'repeat-x'. height needs set. */
}
</style>

<style type="text/css">
body{
        background:url(gradient.php?width=345&start=111222&end=999888&type=y) repeat-y scroll top left; /* the &type=y' so the repeat is 'repeat-y'. width needs set. */
}
</style>