• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1126
  • Last Modified:

PHP and GD Library - Changing color of .png file and outlining it.

I posted this question in the graphics section, but thought maybe I would get a better answer in here.  

I have a question that I have spent hours reading over posts and websites that have information about php and the GD Library.  I have quite a few graphics that are .png files, that are only black and white.  I need to be able to change the color of the black to a specified hexidecimal color within a form.  I also need to outline that image with a hexidecimal color that is chosen from another form element.  Is this possible?  I have read that it is.  Any help is greatly appreciated!
0
dragboatrandy
Asked:
dragboatrandy
  • 5
  • 2
1 Solution
 
CaveyCoUkCommented:
Can you post an example image please?  I basically dont know how easy it would be to do the outlining, but have been playing with it for a bit and 'tis quite cool.

Example -

Dynamic image - http://www.cavey.co.uk/php/experts-exchange/ping.php?oldcolor=000000&newcolor=FFFF00
Original image - http://www.cavey.co.uk/php/experts-exchange/ping1.png

Change oldcolor to 000000 or ffffff to select which area to fill and newcolor to any hex colour you fancy.

Source code is here - http://www.cavey.co.uk/php/experts-exchange/ping.txt.
0
 
dragboatrandyAuthor Commented:
Basically what I do is I sell stickers and I want to be able to change the color using php instead of making 100 different versions of the same stickers to accomodate my color choices.

Sample Image: http://www.dragboats.com/images/merch/stickers/test.png

Your help is greatly appreciated.

0
 
sjohnstone1234Commented:
Here's an initial attempt:

<?php

$i = imagecreatefrompng('test.png');

if(($blackIndex = imagecolorexact($i, 0, 0, 0)) === -1) {
    die('Black index not found');
}

imagecolorset($i, $blackIndex, 255, 0, 0); // change black to red
header('Content-type: image/png');
imagepng($i);

?>

It produces interesting results with your image - looks like there might be some grey shades around the edge?

If the edge was one colour and the fill another, you could set those colours independently (perhaps in response to your web form) using imagecolorexact (to isolate the indexes) and then imagecolorset (to change the colour).
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
CaveyCoUkCommented:
Ok, so

int imagecolorresolve ( resource image, int red, int green, int blue)

doesnt work as advertised, in fact its just as bad as 'imagecolorexact'.  Instead,

int imagecolorclosest ( resource image, int red, int green, int blue)

is much better.  Also, having a 256-colour image makes things a little difficult and off the top of my head I dont know how to find out what is the alpha channel, so if you were to re-export all the images as png-8, limit it to 8 to 16 colours and dont use transparancy they become a little easier to work with.  Examples...

Original files -
Your original - http://www.cavey.co.uk/php/experts-exchange/images/test1.png
Without transparancy - http://www.cavey.co.uk/php/experts-exchange/images/test2.png
8-colour png - http://www.cavey.co.uk/php/experts-exchange/images/test3.png

Anyway, I made this page here -

http://www.cavey.co.uk/php/experts-exchange/make_ping2.php

which allows you to see what an image contains and then supply the arguments to the image creation script.

Quick example  http://www.cavey.co.uk/php/experts-exchange/ping2.php?filename=test3.png&oldcolour0=ffffff&newcolour0=000000

Now from here it is totally possible to start doing elaborate scripting.  Each time you add another oldcolourX=ffffff it will remove the next colour which is most "similar" to ffffff and replace it with the newcolourX, just a quesiton of feeding it the right info.

Source for ping2.php here - http://www.cavey.co.uk/php/experts-exchange/ping2.txt
0
 
CaveyCoUkCommented:
And just so a copy is stored at experts exchange, the source code is.....

<?php
header("Content-Type: text/plain");

function get_colour ($hex){
      $color['r'] = hexdec(substr($hex,0,2));
      $color['g'] = hexdec(substr($hex,2,2));
      $color['b'] = hexdec(substr($hex,4,2));
      return $color;
}

      $filename = ( (isset($_GET['filename']))?$_GET['filename']:"test.png" );
          $im = imagecreatefrompng("./images/".$_GET['filename']);
      
      for ($i=0;isset($_GET['oldcolour'.$i]);$i++){
            $color = ( (isset($_GET['oldcolour'.$i]))?$_GET['oldcolour'.$i]:"000000" );
                $old_color = get_colour($color);
      
            $color = ( (isset($_GET['newcolour'.$i]))?$_GET['newcolour'.$i]:"FF00FF" );
                $new_color = get_colour($color);
            
            $index = imagecolorclosest( $im, $old_color['r'], $old_color['g'], $old_color['b']);
            imagecolorset ( $im, $index, $new_color['r'], $new_color['g'], $new_color['b']);
      }
      
      header("Content-type: image/png");
      imagepng ($im);
      
      imagedestroy($im);
      
?>
0
 
CaveyCoUkCommented:
I got bored and made a new version.

http://www.cavey.co.uk/php/experts-exchange/make_ping4.php

Takes arguments filename, newcolour_black and newcolour_white and will automagically change the colour base of any image.  To get it to work nicely, stroke your images with 1 or 2 pixels of white (so it has something to lock onto) and then save them as transparent png files, example -

http://www.cavey.co.uk/php/experts-exchange/images/test4.png

Then want it red with a green border?  

http://www.cavey.co.uk/php/experts-exchange/ping4.php?filename=test4.png&newcolour_black=ff0000&newcolour_white=00ff00

You can also do it to photos and it copes with colour photos as long as it can find something white and something black to be its reference when changing the colour (when it is a grey scale image, it just finds the most-black and most-white colour, if it was to pick a red you'd end up with some strange effects).

Source code for ping4 (including debug and jpeg options) -

<?php
header("Content-Type: text/plain");

function get_colour ($hex){
      $color['r'] = hexdec(substr($hex,0,2));
      $color['g'] = hexdec(substr($hex,2,2));
      $color['b'] = hexdec(substr($hex,4,2));
      return $color;
}

function make_colour ($color){
      $hex = "";
      $hex .= str_pad(dechex($color['red']),2,"0",STR_PAD_LEFT);
      $hex .= str_pad(dechex($color['green']),2,"0",STR_PAD_LEFT);
      $hex .= str_pad(dechex($color['blue']),2,"0",STR_PAD_LEFT);
      
      return $hex;
}

      $filename = ( (isset($_GET['filename']))?$_GET['filename']:"test.png" );
          $im = imagecreatefrompng("./images/".$_GET['filename']);
      
      $color = ( (isset($_GET['oldcolour_black']))?$_GET['oldcolour_black']:"000000" );
          $old_color_black = get_colour($color);
      $color = ( (isset($_GET['newcolour_black']))?$_GET['newcolour_black']:"0000FF" );
      $new_color_black = get_colour($color);
      
      //$index_black = imagecolorresolve( $im, $old_color_black['r'], $old_color_black['g'], $old_color_black['b']);
      $index_black = imagecolorclosest( $im, $old_color_black['r'], $old_color_black['g'], $old_color_black['b']);
      
      $color = ( (isset($_GET['oldcolour_white']))?$_GET['oldcolour_white']:"FFFFFF" );
          $old_color_white = get_colour($color);
      $color = ( (isset($_GET['newcolour_white']))?$_GET['newcolour_white']:"FF0000" );
      $new_color_white = get_colour($color);
      
      //$index_white = imagecolorresolve( $im, $old_color_white['r'], $old_color_white['g'], $old_color_white['b']);
      $index_white = imagecolorclosest( $im, $old_color_white['r'], $old_color_white['g'], $old_color_white['b']);

      imagecolorset ( $im, $index_black, $new_color_black['r'], $new_color_black['g'], $new_color_black['b']);
      imagecolorset ( $im, $index_white, $new_color_white['r'], $new_color_white['g'], $new_color_white['b']);
      
      $old_range['r']['range'] = ($old_color_white['r']-$old_color_black['r']);
      $old_range['g']['range'] = ($old_color_white['g']-$old_color_black['g']);
      $old_range['b']['range'] = ($old_color_white['b']-$old_color_black['b']);
      $new_range['r']['range'] = ($new_color_white['r']-$new_color_black['r']);
      $new_range['g']['range'] = ($new_color_white['g']-$new_color_black['g']);
      $new_range['b']['range'] = ($new_color_white['b']-$new_color_black['b']);
      
      $old_range['r']['average'] = ($old_color_black['r']+$old_color_white['r'])/2;
      $old_range['g']['average'] = ($old_color_black['g']+$old_color_white['g'])/2;
      $old_range['b']['average'] = ($old_color_black['b']+$old_color_white['b'])/2;
      $new_range['r']['average'] = ($new_color_black['r']+$new_color_white['r'])/2;
      $new_range['g']['average'] = ($new_color_black['g']+$new_color_white['g'])/2;
      $new_range['b']['average'] = ($new_color_black['b']+$new_color_white['b'])/2;
      
      for ($i=0;$i<imagecolorstotal($im);$i++){
            if ($i != $index_black && $i != $index_white){
                  $colours = imagecolorsforindex($im,$i);
                  $colours['r'] = $new_range['r']['average']+(($colours['red'  ]-$old_range['r']['average'])*$new_range['r']['range']/$old_range['r']['range']);
                  $colours['g'] = $new_range['g']['average']+(($colours['green']-$old_range['g']['average'])*$new_range['g']['range']/$old_range['g']['range']);
                  $colours['b'] = $new_range['b']['average']+(($colours['blue' ]-$old_range['b']['average'])*$new_range['b']['range']/$old_range['b']['range']);
                  if (isset($_GET['debug'])) echo "Replace - ".make_colour($colours)." - with - ".make_colour(array("red"=>$colours['r'],"green"=>$colours['g'],"blue"=>$colours['b']))." -\n";
                  imagecolorset ( $im, $i, $colours['r'], $colours['g'], $colours['b']);
            }
      }
      
      if (isset($_GET['debug'])){
            //dont output an image :s
            print_r($old_range);
            print_r($new_range);
      } else if(isset($_GET['jpeg'])){
            header("Content-type: image/jpeg");
            imageinterlace ($im,1);
            imagejpeg ($im,"",99);
            imagedestroy($im);
      } else {
            header("Content-type: image/png");
            imagepng ($im);
            imagedestroy($im);
      }
?>

Bit of a mess, but it works.
0
 
dragboatrandyAuthor Commented:
Thank you so much for your hard work.  This is exactly what I am looking for.  Now, I am pretty green on the implementation into my current page.

The current page is:
http://www.dragboats.com/merch/main_stickers1.php?ProductID=100056

I am transferring the color choices via form POST.  I can easily change them to GET, but some fields within the form will be a little bit long.

When I put the code you provided into the page, I get a header already sent error.

Here is the code for the above page:

<?php require_once('../../Connections/connDragboatAdmin.php'); ?>
<?php require_once('../../Connections/connDragboatUser.php'); ?>
<?php
include("../../includes/merch_colortable.php");
session_start();

$size = explode('_', $_POST['size_price']);
$_SESSION['Size'] = $size[0];
$_SESSION['size_price'] = $_POST['size_price'];
$pcolor = explode('~', $_POST['primary_color']);
$_SESSION['PColor'] = $pcolor[0];
$_SESSION['primary_color'] = $_POST['primary_color'];

$colname_rsStickers = "-1";
if (isset($_GET['ProductID'])) {
  $colname_rsStickers = (get_magic_quotes_gpc()) ? $_GET['ProductID'] : addslashes($_GET['ProductID']);
}
mysql_select_db($database_connDragboatAdmin, $connDragboatAdmin);
$query_rsStickers = sprintf("SELECT * FROM Merch_Products WHERE ProductID = %s", $colname_rsStickers);
$rsStickers = mysql_query($query_rsStickers, $connDragboatAdmin) or die(mysql_error());
$row_rsStickers = mysql_fetch_assoc($rsStickers);
$totalRows_rsStickers = mysql_num_rows($rsStickers);

$colname_rsSizes = "-1";
if (isset($_GET['ProductID'])) {
  $colname_rsSizes = (get_magic_quotes_gpc()) ? $_GET['ProductID'] : addslashes($_GET['ProductID']);
}
mysql_select_db($database_connDragboatUser, $connDragboatUser);
$query_rsSizes = sprintf("SELECT * FROM Merch_Sizes WHERE ProductID = %s ORDER BY SortOrder ASC", $colname_rsSizes);
$rsSizes = mysql_query($query_rsSizes, $connDragboatUser) or die(mysql_error());
$row_rsSizes = mysql_fetch_assoc($rsSizes);
$totalRows_rsSizes = mysql_num_rows($rsSizes);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><!-- InstanceBegin template="/Templates/main_3.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title><!-- InstanceEndEditable -->
<link href="file:///Z|/Websites/Dragboats2/public_html/main.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="1024" border="0" cellpadding="0" cellspacing="0" background="file:///Z|/Websites/Dragboats2/public_html/images/main_back_3.png">
  <tr>
    <td><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r1c1.jpg" width="269" height="102"><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r1c2.jpg" width="466" height="102"><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r1c3.jpg" width="289" height="102"></td>
  </tr>
  <tr>
    <td><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r2c1.jpg" width="269" height="44"><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r2c2.jpg" width="466" height="44"><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r2c3.jpg" width="289" height="44"></td>
  </tr>
  <tr>
    <td><a href="file:///Z|/Websites/Dragboats2/public_html/index.php"></a><a href="file:///Z|/Websites/Dragboats2/public_html/login.php"></a><a href="file:///Z|/Websites/Dragboats2/public_html/classifieds/classifieds.php"></a><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r3c1.png" width="117" height="17"><a href="file:///Z|/Websites/Dragboats2/public_html/index.php"><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r3c2_home.png" alt="Dragboats.com Homepage" width="43" height="17" border="0"></a><a href="file:///Z|/Websites/Dragboats2/public_html/login.php"><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r3c3_login.png" alt="Account Login" width="47" height="17" border="0"></a><a href="file:///Z|/Websites/Dragboats2/public_html/classifieds/classifieds.php"><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r3c4_class.png" alt="Classifieds" width="83" height="17" border="0"></a><a href="file:///Z|/Websites/Dragboats2/public_html/gallery/main.php"><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r3c5_pics.png" alt="Photo Gallery" width="67" height="17" border="0"></a><a href="file:///Z|/Websites/Dragboats2/public_html/merch/main.php"><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r3c6_merch.png" alt="Merchandise" width="93" height="17" border="0"></a><a href="file:///Z|/Websites/Dragboats2/public_html/video/video.php"><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r3c7_video.png" alt="Videos" width="54" height="17" border="0"></a><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r3c8_results.png" width="60" height="17"><a href="file:///Z|/Websites/Dragboats2/public_html/schedule.php"><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r3c9_schedules.png" alt="Race Schedules" width="76" height="17" border="0"></a><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r3c10_profiles.png" width="69" height="17"><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r3c11_venues.png" width="54" height="17"><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r3c12_services.png" width="66" height="17"><a href="file:///Z|/Websites/Dragboats2/public_html/contact.php"><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r3c13_contact.png" alt="Contact Us" width="82" height="17" border="0"></a><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r3c14.png" width="113" height="17"></td>
  </tr>
  </table>
<!-- InstanceBeginEditable name="ContentArea" --><form action="" method="post" name="ColorSelect" id="ColorSelect"><table width="1024" border="0" cellpadding="0" cellspacing="0" background="file:///Z|/Websites/Dragboats2/public_html/images/main_back_3.png">
  <tr>
    <td colspan="7"><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_r4_3.png" width="1024" height="16" /></td>
  </tr>
  <tr>
    <td width="18">&nbsp;</td>
    <td width="164" valign="top"><table width="160" border="0" cellpadding="0" cellspacing="0" background="../images/sm_det_back.png">
      <tr valign="bottom">
        <td height="19" colspan="3" class="headingText"><table width="160" height="19" border="0" cellpadding="0" cellspacing="0" background="../images/sm_det_top.png">
            <tr>
              <td width="15">&nbsp;</td>
              <td width="135" valign="bottom" class="headingTextWhite">AVAILABLE SIZES </td>
              <td width="10">&nbsp;</td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td colspan="3" class="headingText"><img src="../images/sm_det_r2.png" width="160" height="26" /></td>
      </tr>
      <tr>
        <td width="10">&nbsp;</td>
        <td width="130"><?php do {  ?>
            <input name="size_price" type="radio" value="<?php $thisValue = $row_rsSizes['Size'].'_'.$row_rsSizes['Price']; echo $thisValue; ?>" <?php if ($_POST['size_price'] == $thisValue) { echo 'checked'; } ?> onClick=ColorSelect.submit()>
            <span class="headingText"><?php echo $row_rsSizes['Size'].' - $'.$row_rsSizes['Price'];?></span><br>
            <?php
} while ($row_rsSizes = mysql_fetch_assoc($rsSizes));
  $rows = mysql_num_rows($rsSizes);
  if($rows > 0) {
      mysql_data_seek($rsSizes, 0);
        $row_rsSizes = mysql_fetch_assoc($rsSizes);
  }
?>
            <span class="smallTextLeft">
            <input name="ProductID" type="hidden" id="ProductID" value="<?php echo $row_rsStickers['ProductID']; ?>">
          </span></td>
        <td width="10">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td class="bodyText">You can order this sticker in any size you wish, for details call 1-866-29-Nitro </td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="3"><img src="../images/sm_det_btm.png" width="160" height="10" /></td>
      </tr>
    </table>
      <table width="160" border="0" cellpadding="0" cellspacing="0" background="../images/sm_det_back.png">
      <tr valign="bottom">
        <td height="19" colspan="3" class="headingText"><table width="160" height="19" border="0" cellpadding="0" cellspacing="0" background="../images/sm_det_top.png">
            <tr>
              <td width="15">&nbsp;</td>
              <td width="135" valign="bottom" class="headingTextWhite">CURRENT CHOICES </td>
              <td width="10">&nbsp;</td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td colspan="3" class="headingText"><img src="../images/sm_det_r2.png" width="160" height="26" /></td>
      </tr>
      <tr>
        <td width="10">&nbsp;</td>
        <td width="130" class="headingText">Size:</td>
        <td width="10">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td class="bodyText"><?php if (!isset($_POST['size_price'])) { echo 'No Selected'; } else { $size = explode('_', $_POST['size_price']); echo $size[0]; } ?> </td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td class="headingText">Main Color:</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td class="bodyText"><?php if (!isset($_POST['primary_color'])) { echo 'Not Selected'; } else { $size = explode('~', $_POST['primary_color']); echo ucwords($size[0]);} ?></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td class="headingText">Outline/Background Color: </td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><span class="bodyText">
          <?php if (!isset($_POST['primary_color'])) { echo 'Not Selected'; } else { $size = explode('~', $_POST['primary_color']); echo ucwords($size[0]);} ?>
        </span></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="3"><img src="../images/sm_det_btm.png" width="160" height="10" /></td>
      </tr>
    </table>    </td>
    <td width="32">&nbsp;</td>
    <td width="595" align="right" valign="top">
      <table width="595" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td class="bodyTextCentered"><table border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td><img src="../images/adj_detail_tl.png"></td>
                <td background="../images/adj_detail_t.png"></td>
                <td><img src="../images/adj_detail_tr.png"></td>
                <td><img src="../images/adj_detail_tl.png"></td>
                <td width="120" background="../images/adj_detail_t.png"></td>
                <td><img src="../images/adj_detail_tr.png"></td>
              </tr>
              <tr>
                <td background="../images/adj_detail_l.png"></td>
                <td><img src="../images/merch/stickers/<?php echo $row_rsStickers['PartNumber']; ?>.gif"></td>
                <td background="../images/adj_detail_r.png"></td>
                <td background="../images/adj_detail_l.png"></td>
                <td width="120"><table width="120" border="0" cellspacing="0" cellpadding="5" bgcolor="<?php if (!isset($_POST['secondary_color'])) { echo '000000'; } else {$secondaryColor = explode('~', $_POST['secondary_color']); echo $secondaryColor[1];} ?>">
                    <tr>
                      <td width="120"><table width="110" border="0" align="center" cellpadding="0" cellspacing="0">
                          <tr>
                            <td width="100" height="50" bgcolor="<?php if (!isset($_POST['primary_color'])) { echo '000000'; } else {$primaryColor = explode('~', $_POST['primary_color']); echo $primaryColor[1];} ?>">&nbsp;</td>
                          </tr>
                      </table></td>
                    </tr>
                </table></td>
                <td background="../images/adj_detail_r.png"></td>
              </tr>
              <tr>
                <td><img src="../images/adj_detail_bl.png"></td>
                <td background="../images/adj_detail_b.png"></td>
                <td><img src="../images/adj_detail_br.png"></td>
                <td><img src="../images/adj_detail_bl.png"></td>
                <td width="120" background="../images/adj_detail_b.png"></td>
                <td><img src="../images/adj_detail_br.png"></td>
              </tr>
            </table>            </td>
        </tr>
        <tr>
          <td class="bodyTextCentered"><table width="595" border="0" align="center" cellpadding="0" cellspacing="0" background="../images/med_det_back.png">
            <tr>
              <td colspan="3"><table width="595" height="21" border="0" cellpadding="0" cellspacing="0" background="../images/med_det_top.png">
                  <tr>
                    <td width="15">&nbsp;</td>
                    <td width="565" class="headingTextWhite">MAIN STICKER COLOR </td>
                    <td width="15">&nbsp;</td>
                  </tr>
              </table></td>
            </tr>
            <tr>
              <td colspan="3"><img src="../images/med_det_2.jpg" width="595" height="26" /></td>
            </tr>
            <tr>
              <td width="15">&nbsp;</td>
              <td width="565" class="bodyTextCentered"><p>
                <?php if (isset($_POST['primary_color'])) { $primary_color = explode('~', $_POST['primary_color']); $selectedPrimaryColor = $primary_color[0]; } else { $selectedPrimaryColor = 'black'; } colorTable('primary_', $selectedPrimaryColor); ?>
              </p></td>
              <td width="15">&nbsp;</td>
            </tr>
            <tr>
              <td colspan="3"><img src="../images/med_det_btm.png" width="595" height="10" /></td>
            </tr>
          </table>            </td>
        </tr>
        <tr>
          <td><span class="bodyTextCentered">
            </span>
            <table width="595" border="0" align="center" cellpadding="0" cellspacing="0" background="../images/med_det_back.png">
              <tr>
                <td colspan="3"><table width="595" height="21" border="0" cellpadding="0" cellspacing="0" background="../images/med_det_top.png">
                    <tr>
                      <td width="15">&nbsp;</td>
                      <td width="565" class="headingTextWhite">OUTLINE/BACKGROUND COLOR </td>
                      <td width="15">&nbsp;</td>
                    </tr>
                </table></td>
              </tr>
              <tr>
                <td colspan="3"><img src="../images/med_det_2.jpg" width="595" height="26" /></td>
              </tr>
              <tr>
                <td width="15">&nbsp;</td>
                <td width="565" class="bodyTextCentered"><p>
                  <?php if (isset($_POST['primary_color'])) { $secondary_color = explode('~', $_POST['secondary_color']); $selectedSecondaryColor = $secondary_color[0]; } else { $selectedSecondaryColor = ''; } if (isset($_POST['primary_color'])) {colorTable('secondary_', $selectedSecondaryColor);} ?>
                </p></td>
                <td width="15">&nbsp;</td>
              </tr>
              <tr>
                <td colspan="3"><img src="../images/med_det_btm.png" width="595" height="10" /></td>
              </tr>
            </table>
            </td>
        </tr>
      </table>
     
      <span class="bodyTextCentered">
      <input name="ProductID2" type="hidden" value="<?php if (isset($_POST['ProductID'])) { echo $_POST['ProductID']; } if (isset($_GET['ProductID'])) { echo $_GET['ProductID']; }?>">
      </span><span class="bodyTextCentered">
      <input name="SizePrice" type="hidden" value="<?php echo $_POST['SizePrice']; ?>">
      </span></td>
    <td width="32">&nbsp;</td>
    <td width="165" valign="top"><table width="160" border="0" cellpadding="0" cellspacing="0" background="file:///Z|/Websites/Dragboats2/public_html/images/sm_det_back.png">
      <tr valign="bottom">
        <td height="19" colspan="3" class="headingText"><table width="160" height="19" border="0" cellpadding="0" cellspacing="0" background="file:///Z|/Websites/Dragboats2/public_html/images/sm_det_top.png">
            <tr>
              <td width="15">&nbsp;</td>
              <td width="135" valign="bottom" class="headingTextWhite">Your Text Here </td>
              <td width="10">&nbsp;</td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td colspan="3" class="headingText"><img src="file:///Z|/Websites/Dragboats2/public_html/images/sm_det_r2.png" width="160" height="26" /></td>
      </tr>
      <tr>
        <td width="10">&nbsp;</td>
        <td width="130">&nbsp;</td>
        <td width="10">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="3"><img src="file:///Z|/Websites/Dragboats2/public_html/images/sm_det_btm.png" width="160" height="10" /></td>
      </tr>
    </table></td>
    <td width="18">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="7"><img src="file:///Z|/Websites/Dragboats2/public_html/images/main_btm_3.png" width="1024" height="26" /></td>
  </tr>
</table>
</form>
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>

Also, I would like to change the background of the sample to black or white based on a radio button.  I don't know if I can just create a background table and color it the appropriate color?

You have been a tremendous help - much appreciated!
Randy
0
 
CaveyCoUkCommented:
For a start, replace

         $im = imagecreatefrompng("./images/".$_GET['filename']);

with

      $type = exif_imagetype ("./images/".$_GET['filename']);
      switch($type){
            /*
            1 = IMAGETYPE_GIF, 2 = IMAGETYPE_JPEG, 3 = IMAGETYPE_PNG, 4 = IMAGETYPE_SWF,
            5 = IMAGETYPE_PSD, 6 = IMAGETYPE_BMP, 7 = IMAGETYPE_TIFF_II (intel byte order),
            8 = IMAGETYPE_TIFF_MM (motorola byte order), 9 = IMAGETYPE_JPC, 10 = IMAGETYPE_JP2,
            11 = IMAGETYPE_JPX, and 12 = IMAGETYPE_SWC
            */
            default:
                  die("Incompatible file type");
                  break;
            case 1:
                      $im = imagecreatefromgif("./images/".$_GET['filename']);
                  break;
            case 2:
                      $im = imagecreatefromjpeg("./images/".$_GET['filename']);
                  break;
            case 3:
                      $im = imagecreatefrompng("./images/".$_GET['filename']);
                  break;
            case 6:
                      $im = imagecreatefromwbmp("./images/".$_GET['filename']);
                  break;
      }

so that it can handle gif and jpeg files.  

And personally, I'd stick with GET and update the image via a javascript as it would look cooler instead of the whole page refreshing

Example - http://www.cavey.co.uk/php/experts-exchange/make_ping4b.php

Failing that, change the GET/POST to REQUEST and it will use whichever you supply.  

But remember - the request for the image is a new and unique request.  The posts wont be forwarded on to the images in the page, so you would have to do them yourself.

And changing the background colour should be as easy as setting an ID on the td or div that you want to change the colour of then use

document.getElementById("id").background-color = "#ffffff"

or whatever.  Hope that helps, and I recommend starting a new question if you need anything else, cause I probably wont come back to this one.....
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now