Legacy ImageMagick Discussions Archive

A split off from this thread: viewtopic.php?f=1&t=21354

The original post talked about automaticaly creating a colage of images and the idea came up to create an imagemap at the same time so that when a photo was selected it would open a larger version.

I had some old code to do something along those lines and I have modified it a bit and posted it below. For some reason unknown the colour is not being selected correctly with ImageColorAt; it used to work and I assume something has changed with php 5

We may now be moving to a IM method of selecting the colour and so I am not to worried about that at the moment

The working example can be seen here: http://www.rubblewebs.co.uk/TESTS/backg ... allery.php and the colour map that is used is: http://www.rubblewebs.co.uk/TESTS/backg ... ry_map.gif

Generate the top image and map:

Code: Select all

<?php
$background_colour = "white";
$background_location = "background.jpg";
$map_location = "gallery_map.gif";

function resize_rotate( $image, $new_name, $colour, $map )
	{

	// Resize the image and add the border
	$cmd = "$image -thumbnail 370x350 -bordercolor black -border 1x1";
	exec("convert $cmd $new_name "); 

	// Create the colour swatch for the map
	exec("convert $new_name -fill $colour -colorize 100% $map"); 	
	}
/* ********************** End of resize_rotate function ****************************** */ 

// Photos to use
$a = "logo.png";
$j = "rose.jpg";
$k = "bluebells_lin.jpg";
$o = "wizard.png";

// Generate the images
resize_rotate ( $a, 'photo10.miff', 'red', 'photo11.miff' );
resize_rotate ( $j, 'photo20.miff', 'black', 'photo21.miff' );
resize_rotate ( $k, 'photo30.miff', 'yellow', 'photo31.miff' );
resize_rotate ( $o, 'photo40.miff', 'blue', 'photo41.miff' );

// Generate the background combined image
exec("convert -size 940x650 xc:$background_colour photo10.miff -geometry +2+2 -composite photo40.miff -geometry +460+205 -composite photo20.miff -geometry +360+20 -composite photo30.miff -geometry +50+230 -composite -trim  $background_location"); 

// Generate the background combined image map
exec("convert -size 940x650 xc:white photo11.miff -geometry +2+2 -composite photo41.miff -geometry +460+205 -composite photo21.miff -geometry +360+20 -composite photo31.miff -geometry +50+230 -composite -trim $map_location"); 

// Delete the tempory images
foreach ( glob( "*.miff" ) as $filename )
	{
	unlink( $filename ); 
	}

?>

The code to select the colour and so generate the link or whatever:

Code: Select all

<?php
                
				$gallery_map = "gallery_map.gif";
				$gallery_index = "background.jpg";
				
				$x = ( empty($_GET['map_x']))?'':$_GET['map_x'];
                $y = ( empty($_GET['map_y']))?'':$_GET['map_y'];
				
				// First visit to the page so $x is empty
                if ( empty( $x ))
                {
                    echo "<center>\n<form>
					<input type=\"image\" src=\"$gallery_index\" name=\"map\" title=\"Select an image to go to the gallery\" >
					</form>\n</center>";
                }
				
				else {
				
                // Get the colour from background.gif to use for the photo directory
                $rgb = "";
                
                $im = imagecreatefromgif( $gallery_map );
                $rgb = ImageColorAt($im, $x, $y);
                
				echo "<h2>RGB value of colour selected = ".$rgb."</h2>";
                
                // Yellow
                if ($rgb = '71' & $rgb < '110')
                {
                    $read = 'Bluebells';
                }
                // Blue
                elseif ($rgb > '131' & $rgb < '167')
                {
                    $read = 'Wizzard';
                }
                // Red
                elseif ($rgb > '31' & $rgb < '69')
                {
                    $read = 'IM Logo';
                }
                // Black
                elseif ($rgb == '0')
                {
                    $read = 'Rose';
                }
                // If none of the above use a default
                else
                {
                    $read = 'None';
                }
                
                    // If the use has clicked the background rather than an image display this
                    if ($read == 'None')
                    {
                        echo "<h1><br>You missed all of the photos.</h1> ";
                    }
                
                    // If the user has correctly selected a image display the text
                    else
                    {
                        echo "<h2>$read photo selected</h2>";
                } } 
                ?>

I thought I had seen something about pixel colours somewhere: viewtopic.php?f=1&t=19297&hilit=pixel+color+get

Not in the format I need but should be able to sort that.

Code: Select all

$colour = exec("convert $gallery_map\"[1x1+$x+$y]\" -format \"%[fx:floor(255*u.r)],%[fx:floor(255*u.g)],%[fx:floor(255*u.b)]\" info:");

You overlooked my comment at your other post, viewtopic.php?f=1&t=21354#p87175

Sorry fmw42; I did read it and promptly forgot it. I can not belive my memory span is only a couple of hours

Using the IM method is a lot more acurate than the GD method - apart from it not currently working - before I had to have quite a broad range to pickup the colour. Using the IM method you could have thousands of colours in the map.

In the generate code it would be better to use colour value not a colour name.

New code uploaded to example page - is slower than imagecolorat but I have 3 fx calculations:

Code: Select all

<?php
                
	$gallery_map = "gallery_map.gif";
	$gallery_index = "background.jpg";
				
	$x = ( empty($_GET['map_x']))?'':$_GET['map_x'];
    $y = ( empty($_GET['map_y']))?'':$_GET['map_y'];
				
// First visit to the page so $x is empty
    if ( empty( $x )){
        echo "<center>\n<form>
		<input type=\"image\" src=\"$gallery_index\" name=\"map\" title=\"Select an image to go to the gallery\" >
		</form>\n</center>";
                }
				
	else {
// Get the colour from background.gif to use for the photo directory 				
	$colour = exec("convert $gallery_map\"[1x1+$x+$y]\" -format \"%[fx:floor(255*u.r)],%[fx:floor(255*u.g)],%[fx:floor(255*u.b)]\" info:");
				
// Set the variable based on the colour
	switch ($colour) {
	case "255,255,0":
		$read = 'Bluebells';
		break;
	case "0,0,255":
		$read = 'Wizzard';
		break;
	case "255,0,0":
		$read = 'IM Logo';
		break;
	case "0,0,0":
		$read = 'Rose';
		break;
	default:
		$read = 'No';
					}
                
// Display the text

    echo "<h2>$read photo selected</h2>";
        } 
?>

So if I use this to generate my colour map they are all blue blocks of some sort and I will have a base of 256 blues; this will then speed up the selection as I will only have one fx calculation.

Code: Select all

// Generate the images
resize_rotate ( $a, 'photo10.miff', 'rgb(0,0,10)', 'photo11.miff' );
resize_rotate ( $j, 'photo20.miff', 'rgb(0,0,50)', 'photo21.miff' );
resize_rotate ( $k, 'photo30.miff', 'rgb(0,0,100)', 'photo31.miff' );
resize_rotate ( $o, 'photo40.miff', 'rgb(0,0,150)', 'photo41.miff' );

Code: Select all

// Get the colour from background.gif to use for the photo directory 				
	$colour = exec("convert $gallery_map\"[1x1+$x+$y]\" -format \"%[fx:round(255*u.b)]\" info:");
			echo $colour;	
// Set the variable based on the colour
	switch ($colour) {
	case "100":
		$read = 'Bluebells';
		break;
	case "150":
		$read = 'Wizzard';
		break;
	case "10":
		$read = 'IM Logo';
		break;
	case "50":
		$read = 'Rose';
		break;
	default:
		$read = 'No';
					}

Legacy ImageMagick Discussions Archive

Create a type of image map dynamicaly with the image

Create a type of image map dynamicaly with the image

Re: Create a type of imagemage dynamicaly with the image

Re: Create a type of imagemage dynamicaly with the image

Re: Create a type of imagemage dynamicaly with the image

Re: Create a type of image map dynamicaly with the image

Re: Create a type of image map dynamicaly with the image