All the colors in a JPEG: Color Palette

Need help with Photoshop, the GIMP, Illustrator, or others? Want to show off your work? Looking for advice on your newest Flash stuff?

Moderator: General Moderators

User avatar
Jaxolotl
Forum Contributor
Posts: 137
Joined: Mon Nov 13, 2006 4:19 am
Location: Argentina and Italy

Post by Jaxolotl »

ok the script was really different from what you need. It was only a Color picker from a PNG image color palette.
For this specific script I prefer PNG because of the quality of the compression (lossless) and the color depth (24-bit) (tnx for the advice onion2k)

Anyway where's the code, maybe it's usefull for someone.

Practically it output the HEX RGB code (html format) of the color you "click" on the palette.

SEE EDIT
onion2k wrote:
Jaxolotl wrote:

Code: Select all

  $imageIdentifierResource = ImageCreateFromPng($palette_image);
  $color_at_pointer = imagecolorat($imageIdentifierResource,$_POST['img_x'],$_POST['img_y']);
There's a bug in that. GD indexes the top left corner of an image as 0,0. An HTML image map indexes it as 1,1. When you select a colour using that script you'll always get the pixel thats 1 down and to the right of where you clicked.
Thanks you for the correction onion2k

Code: Select all

<?php 
$palette_image = "immagini/palette.png"; // REPLACE THIS WITH YOUR PALETTE PATH
if (!isset($_POST['img_x'])){
  $RGB = "FFFFFF";
}
else {

  $imageIdentifierResource = ImageCreateFromPng($palette_image);
  // MODIFIED
  //$color_at_pointer = imagecolorat($imageIdentifierResource,$_POST['img_x'],$_POST['img_y']);
  $color_at_pointer = imagecolorat($imageIdentifierResource,($_POST['img_x']-1),($_POST['img_y']-1));
  $color_hexa = imagecolorsforindex($imageIdentifierResource,$color_at_pointer);
  
  //SET THE VALUE AND PREVENT 1 DIGIT RESULT
  $red = (strlen(dechex($color_hexa['red'])) == 2) ? dechex($color_hexa['red']) : ("0".dechex($color_hexa['red']));
  $green = (strlen(dechex($color_hexa['green'])) == 2) ? dechex($color_hexa['green']) : ("0".dechex($color_hexa['green']));
  $blue = (strlen(dechex($color_hexa['blue'])) == 2) ? dechex($color_hexa['blue']) : ("0".dechex($color_hexa['blue']));

  $RGB = $red.$green.$blue;

}
list($width, $height, $type, $attr) = getimagesize($palette_image);
$attr = str_replace(""","",$attr);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Color Picker</title>

    <meta http-equiv="imagetoolbar" content="no">
    <meta name="COPYRIGHT" content="Copyright (c) 2005 Jaxolotl Design">
    <meta name="Author" content="Design and Programming:Javier Valderrama">
  </head>
  <body>
    <table width="95%" cellspacing="1" cellpadding="2" border="0"  bgcolor="#ffffff" align="center">
      <tr valign="top">
        <td height="600" width="<?php echo ($width+10); ?>">
          <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
              <input name="img" type="image" src="<?php echo $palette_image; ?>" alt="<?php echo $attr; ?>"  title="<?php echo $attr; ?>">
            </form>
        </td>
        <td>
          <strong>Click on the color to obtain HEX code and preview:</strong><br><br>
          <table width="100%" border="0" cellpadding="2" cellspacing="0">
            <tr>
              <td>
                <span>Preview:</span>
              </td>
            </tr>
            <tr>
              <td height="70" style="width:99%;background-color:#<?php echo $RGB ;?>; border:dashed 1px #A97807;">
                &nbsp;
              </td>
            </tr>
            <tr>
              <td>
                <br><br>Copy and Paste this code	<br><br>
                <span>Code:</span>
              </td>
            </tr>
            <tr>
              <td>
                <textarea rows="3" style="width:99%;background-color:#FEF9EB; border:solid 1px #A97807;">#<?php echo $RGB ;?></textarea>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>
Download the Palette image from here
Last edited by Jaxolotl on Thu Jan 04, 2007 5:23 am, edited 2 times in total.
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post by onion2k »

Jaxolotl wrote:

Code: Select all

  $imageIdentifierResource = ImageCreateFromPng($palette_image);
  $color_at_pointer = imagecolorat($imageIdentifierResource,$_POST['img_x'],$_POST['img_y']);
There's a bug in that. GD indexes the top left corner of an image as 0,0. An HTML image map indexes it as 1,1. When you select a colour using that script you'll always get the pixel thats 1 down and to the right of where you clicked.
User avatar
Jaxolotl
Forum Contributor
Posts: 137
Joined: Mon Nov 13, 2006 4:19 am
Location: Argentina and Italy

Post by Jaxolotl »

Thanks you for the correction!
I did edit the code on the upper post.
It is correct now..... (isn't it?)
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

onion2k wrote:
Jaxolotl wrote:One thing I remember is that using PNG(24) images was better than using JPG files but at this very moment I don't remember exactly why, if I find it I'll let you know.
Each image format has it's pros and cons. You can't just say "PNG is better than JPEG". It depends on the image, and what features you need.
Except in the case of PNG-8, which is better than GIF.... :twisted:

On a more serious note, what Jaxolotl was probably referring to is the fact that PNG-24 is lossless, so you won't be adding any artifacting to the image you're analyzing.
Post Reply