Left and right arrows (triangles) using GD

PHP
1

I need to create an image icon which consists of a left and right “arrow” (triangle) side-by-side with 5px gap in between them.

How can I achieve this?

2

Why do you need to use GD to this? The images sound quite specific and non-dynamic, would you not be best just using a regular image?

3

I’d like to be able to customise the colours on the fly :slight_smile:

4

Ah, in which case…

I’d still create a regular image, then just use a combination of [fphp]imagecolorclosest[/fphp] & [fphp]imagecolorset[/fphp] to change the color of the triangle.

Make sense?

5

Maybe this, very rough demo, will help explain my thinking. :slight_smile:

http://dev.anthonysterling.com/sp/?r=255&g=255&b=0


<?php
function getColor($channel){
  if(isset($_GET[$channel]) && ctype_digit($_GET[$channel])){
    return (int)$_GET[$channel];
  }
  return 0;
}
$template = imagecreatefrompng('img.png');
$color = imagecolorclosest($template, 0, 0, 0);
imagecolorset($template, $color, getColor('r'), getColor('g'), getColor('b'));
header('Content-Type: image/png');
imagepng($template);

…and this is the source, template, image.

6

Sorry just got back… yes i’d forgotten about the colour replace, good idea! Cheers, will experiment shortly :slight_smile:

7

No worries, here’s the source for the demo. :slight_smile:


<?php
error_reporting(-1);
ini_set('display_errors', true);

$channels = array();

foreach(array('r', 'g', 'b') as $channel){
  $channels[$channel] = 0;
  if(false === empty($_GET[$channel])){
    $channels[$channel] = (int)$_GET[$channel];
  }
}

function replace_color_at(&$image, $x, $y, $r, $g, $b){
  imagecolorset($image, imagecolorat($image, $x, $y), $r, $g, $b);
}

if(array_key_exists('image', $_GET)){
  $template = imagecreatefrompng('img.png');
  replace_color_at($template, 25, 25, $channels['r'], $channels['g'], $channels['b']);
  header('Content-Type: image/png');
  imagepng($template);
  exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.0/build/cssreset/reset-min.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.0/build/cssbase/base-min.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.0/build/cssfonts/fonts-min.css" />
        <title>
          Demo
        </title>
    </head>
    <body>
      <h2>Presets</h2>
      <ul>
        <li>
          <a href="?r=255">
            Red
          </a>
        </li>
        <li>
          <a href="?g=255">
            Green
          </a>
        </li>
        <li>
          <a href="?b=255">
            Blue
          </a>
        </li>
        <li>
          <a href="?">
            Black
          </a>
        </li>
        <li>
          <a href="?r=130&amp;g=130&amp;b=130">
            Grey
          </a>
        </li>
      </ul>
      <form action="" method="get">
        <?php foreach(array('r', 'g', 'b') as $channel): ?>
          <label for="color-<?php echo $channel; ?>">
            <?php echo strtoupper($channel); ?>:
          </label>
          <select class="color" id="color-<?php echo $channel; ?>" name="<?php echo $channel; ?>">
            <?php foreach(range(0, 255) as $index): ?>
              <option <?php if($index === $channels[$channel]) echo 'selected="selected"' ; ?> value="<?php echo $index; ?>">
                <?php echo $index; ?>
              </option>
            <?php endforeach; ?>
          </select>
        <?php endforeach; ?>
        <input type="submit" value="update" />
      </form>
      <img id="arrow" src="?image=1&amp;r=<?php echo $channels['r']; ?>&amp;g=<?php echo $channels['g']; ?>&amp;b=<?php echo $channels['b']; ?>" alt="arrow" />
      <script type="text/javascript">
      /* <![CDATA[ */
        $(document).ready(function(){
          $('select.color').change(function(){
            var r = $('#color-r').val();
            var g = $('#color-g').val();
            var b = $('#color-b').val();
            $('#arrow').attr('src', '?image=1&r=' + r + '&g=' + g + '&b=' + b);
          });
        });
      /* ]]> */
      </script>
    </body>
</html>
8

Perfect thanks