Signature Applet to output image using php&GD

[piznac]

I have seen this question asked before, but never a answer.

First is anyone fimilar with the Goetz's Signature Applet. I need to take this to a image and store the path in a database. From what I understand this applet outputs a set of plot points which I then need to turn into an image via the GD libary and a little php magic. Or thats what I think I need to do,.. but Im a little lost.

Has any done this before?

so far this is what I have for the form results:
[code]//get signature image
$img_w = $_POST['width'];
$img_h = $_POST['height'];
$ih = imagecreate($img_w, $img_h);
$black = imagecolorallocate($ih, 0, 0, 0);
$white = imagecolorallocate($ih, 255, 255, 255);
imagefill($ih, 0, 0, $white);
echo $ih; [/code]

Now I have no clue what Im doing,.. so if someone could just point me in the right direction I would love it

[onlyican]

Try this

[code]
<?php
$img_w = $_POST['width'];
$img_h = $_POST['height'];
$ih = imagecreate($img_w, $img_h);
$black = imagecolorallocate($ih, 0, 0, 0);
$white = imagecolorallocate($ih, 255, 255, 255);
imagefill($ih, 0, 0, $white);
$save_to = "images/".$file_name.".jpg";
imagejpeg($ih, $save_to);
image_destroy($ih);
echo "<img src='".$save_to."' />";

?>

[/code]

[Barand]

[quote]this applet outputs a set of plot points which I then need to turn into an image via the GD libary [/quote]
For those who have never heard of this applet, do you have an example of the "set of plot points" that you want to convert to an image?

[piznac]

to be honest with you Barand,.. I havent gotten them to display yet (the actual string that is). But an example would be:

10 10 100 10 100 10 100 100 100 100 10 100 10 100 10 10  this would display a box

onlyican I will give that a shot,..

[onlyican]

Is it a normal string?
Why not use imagestring();

//Edit
Sorry, function is imagestring() not imagecreatefromstring()

[piznac]

Well,.. guys Im lost so I willtry anything at this point,... how would I use imagecreatefromstring(); onlyican?

These sre supposed to be the params I go by:
[code] <INPUT TYPE=hidden NAME="signature" value="">
<INPUT TYPE=hidden NAME="width" value="200">
<INPUT TYPE=hidden NAME="height" value="50">
<INPUT TYPE=hidden NAME="filename" value="testsig.jpg">
<input type="submit" name="Submit" value="Submit" />[/code]

Well now I end up with a blank image,.. which is closer ;D

[onlyican]

Sorry, it is imagestring();
I was thinking of something else
http://es2.php.net/manual/en/function.imagestring.php

[piznac]

yeah I really dont get that,.. hmmm, could you possibly give me an example? ::)

I think the string will be stored here:

[code]$img = $_POST['signature'];[/code]

[onlyican]

[code]
<?php
//Create the Image 100X 30Y
$im = imagecreate(100, 30);

// white background and blue text
$bg = imagecolorallocate($im, 0, 0, 0);
$textcolor = imagecolorallocate($im, 255, 255, 255);
$string = "This is a test";
// write the string at the top left
imagestring($im, 5, 5, 5, $string, $textcolor);

// output the image
header("Content-type: image/png");
imagepng($im);
?>
[/code]
This will output an image with "This is a test" inside it

[Barand]

If you have the points data, each pair is a set of x,y coords of a point, then

[code]<?php
  $im = imagecreate(120,120);
  $white = imagecolorallocate($im, 0xff, 0xff, 0xff);
  $red = imagecolorallocate($im, 0xff, 0x00, 0x00);
 
  $points = array(
      10, 10,
      100, 10,
      100, 100,
      10, 100);
  imagepolygon($im, $points, 4, $red);
 
  header ("content-type: image/png");
  imagepng ($im);
  imagedestroy($im);
?>[/code]

[piznac]

Ok I am so confused..lol

But I feel I am getting closer so please bear with me.
I tried this

[code]//get signature image
$img = $_POST['signature'];

//Create the Image 200X 50Y
$im = imagecreate(200, 50);

// white background and blue text
$bg = imagecolorallocate($im, 0, 0, 0);
$textcolor = imagecolorallocate($im, 255, 255, 255);
$string = "$img";
// write the string at the top left
imagestring($im, 5, 5, 5, $string, $textcolor);

// output the image
header("Content-type: image/png");
imagepng($im);[/code]

This outputs a black image,.. so I tried what you suggested Barand:

[code]//get signature image
$img = $_POST['signature'];


  $im = imagecreate(200,50);
  $white = imagecolorallocate($im, 0xff, 0xff, 0xff);
  $red = imagecolorallocate($im, 0xff, 0x00, 0x00);
 
  $points = array($img);
  imagepolygon($im, $points, 4, $red);
 
  header ("content-type: image/png");
  imagepng ($im);
  imagedestroy($im);[/code]

I get this error:

[code]Warning: imagepolygon() [function.imagepolygon]: You must have at least 3 points in your array in /home/rack/public_html/project/mobile/signoff_results.php on line 177

Warning: Cannot modify header information - headers already sent by (output started at /home/rack/public_html/project/mobile/signoff_results.php:177) in /home/rack/public_html/project/mobile/signoff_results.php on line 179
‰PNG  IHDRÈ2
#Ÿ¢PLTEÿÿÿÿëZç“IDAT8c`£`Œ‚Q
•¡ÈIEND®B`‚[/code]

Now I am right in assuming that I must make $img an array? And if so how?... If not any Ideas?

[piznac]

If this helps,.. this is an excerpt from the perl/CGI script that is supposed to email this:

[code]# Create the image.
$im = new GD::Image($width,$height) || die 'image error';


# allocate white
$white = $im->colorAllocate(255, 255, 255);


# allocate black
$black = $im->colorAllocate(0, 0, 0);

# Get the points.
$_=param('signature');
if($_==undef){
print ("Content-type: text/html\n\n");
print 'Nothing is drawn.';
die 'no drawing';
}

# Set binary mode.
binmode STDOUT;

# Make a temp image on disk.
# Get the date:
$filetimestamp=`$DATE '+%H:%M:%S'`;
chomp($filetimestamp);
$tempimage="/tmp/tempimage.$filetimestamp.$$";
open (image, ">$tempimage");
print image $im->jpeg();
close image;[/code]

[Barand]

The $points array needs to be an array of x,y points as in my code (the 4 corners of the box)

I edited the post to try to make it a bit clearer

[piznac]

Ok,.. so if they are not being outputted that way,.. then that would be the problem yes? I will have to dig a little deeper,.. TY

[Barand]

here's a version using the exect data you posted earlier for me

[code]
<?php
 
  $im = imagecreate(120,120);
  $white = imagecolorallocate($im, 0xff, 0xff, 0xff);
  $red = imagecolorallocate($im, 0xff, 0x00, 0x00);
 
  $data = "10 10 100 10 100 10 100 100 100 100 10 100 10 100 10 10";
 
  $points = explode(' ', $data);  // put data into an array
  $num = count($points)/2;
  imagepolygon($im, $points, $num, $red);
 
  header ("content-type: image/png");
  imagepng ($im);
  imagedestroy($im);
?>[/code]

[piznac]

Ok,.. I'm starting to get the impression that Im not getting the data needed from the applet. You said you are not familar with this applet?

[Barand]

I've just googled it. I take it you have the applet but not the server code?

Does it create a file on your server? If so, can you locate it and post it as an attachment and I'll have a look at it and see if I can get anything useful from it (in a short time).

[piznac]

Ok,... wow I really must learn some Html/Java skills  :)

I finally have it out putting correctly

[code]$img = 11 38 11 38 11 38 11 37 11 37 11 36 11 36 13 35 13 35 15 33 15 33 20 32 20 32 24 29 24 29 28 27 28 27 35 25 35 25 38 24 38 24 41 23 41 23 45 23 45 23 46 23 46 23 49 23 49 23 50 24 50 24 51 26 51 26 51 28 51 28 51 32 51 32 50 34 50 34 49 34 49 34 49 33 49 33 49 32 49 32 50 30 50 30 52 28 52 28 55 26 55 26 60 23 60 23 66 20 66 20 71 18 71 18 73 16 73 16 74 16 74 16 75 17 75 17 76 19 76 19 77 19 77 19 78 19 78 19 80 18 80 18 86 17 86 17 95 17 95 17 103 17 103 17 114 17 114 17 118 17 118 17 121 17 121 17 122 17 122 17 123 17 123 17 125 17 125 17 127 16 127 16 129 15 129 15 131 15 131 15 134 15 134 15 136 15 136 15 137 17 137 17 139 18 139 18 140 20 140 20 141 20 141 20 141 19 141 19 141 18 141 18 143 14 143 14 145 12 145 12 147 10 147 10 150 8 150 8 152 7 152 7 154 7 154 7 155 7 155 7 157 7 157 7 158 7[/code]

Now Im getting a cannot modify headers error...I place the code at the very top of my page in hopes that I would have a real simple way out,.. but no such luck. Here is the code thus far:

[code]//get signature image
$img = $_POST['signature'];
if ($img == ''){
echo "no worky";
}else{
echo "$img";
}


  $im = imagecreate(200,50);
  $white = imagecolorallocate($im, 0xff, 0xff, 0xff);
  $red = imagecolorallocate($im, 0xff, 0x00, 0x00);
 
  $data = "$img";
 
  $points = explode(' ', $data);  // put data into an array
  $num = count($points)/2;
  imagepolygon($im, $points, $num, $red);
 
  header ("content-type: image/png");
  imagepng ($im);
  imagedestroy($im);[/code]

and the error:
[code]Warning: Cannot modify header information - headers already sent by (output started at /home/rack/public_html/project/mobile/signoff_results.php:7) in /home/rack/public_html/project/mobile/signoff_results.php on line 21
‰PNG  IHDRÈ2
#Ÿ¢PLTEÿÿÿÿëZç“ÎIDAT8í’= Â@…ß1 ÁD±&G°°H!AÄx`i‘bñi’#¤´ã®é6o[ñUÃ~̾ù~Dê)‘ ‘Èêû”*@¬wi 9È ûº½öOoûû¹e­Õ‡Þ?“¸Û`ã“hêì]à“³³gDi`KË
¡!ï­wö¾BäkÄ쫉QløÁ %KIµw[^hÅÚv¯lŸ|÷C <RRØâ(QU·6_{.œD‚=ˆ×:¯%’Jà¯z
ß%†Í´@XIEND®B`‚[/code]

thanks for all the help man,.. it means alot. Also I would like to out put to a jpg,.. I will be reading the manual to tried to figure this one out,.. thanks

[Barand]

Remove the "no worky" stuff from the top of the file. It stops the header() function from working.

I hardcoded in the $img = blah bit to test.
Change it back to
[code]$img = $_POST['signature']; [/code] once you have tried it.

I also changed it so it will output to "signature.jpg" file

Also, imagepolygon() automatically closes the polygon, drawing a line from end back to start, so I've written a imagepolyline() function to just join the points.

[code]
<?php
  function imagepolyline (&$image, &$p, $count, $color) {
    for ($i=0; $i<$count * 2 - 3; $i+=2) {
        imageline($image, $p[$i], $p[$i+1], $p[$i+2], $p[$i+3], $color);
    }
  }

$img = "11 38 11 38 11 38 11 37 11 37 11 36 11 36 13 35 13 35 15 33 15 33 20 32 20 32 24 29 24 29 28 27 28 27 35 25 35 25 38 24 38 24 41 23 41 23 45 23 45 23 46 23 46 23 49 23 49 23 50 24 50 24 51 26 51 26 51 28 51 28 51 32 51 32 50 34 50 34 49 34 49 34 49 33 49 33 49 32 49 32 50 30 50 30 52 28 52 28 55 26 55 26 60 23 60 23 66 20 66 20 71 18 71 18 73 16 73 16 74 16 74 16 75 17 75 17 76 19 76 19 77 19 77 19 78 19 78 19 80 18 80 18 86 17 86 17 95 17 95 17 103 17 103 17 114 17 114 17 118 17 118 17 121 17 121 17 122 17 122 17 123 17 123 17 125 17 125 17 127 16 127 16 129 15 129 15 131 15 131 15 134 15 134 15 136 15 136 15 137 17 137 17 139 18 139 18 140 20 140 20 141 20 141 20 141 19 141 19 141 18 141 18 143 14 143 14 145 12 145 12 147 10 147 10 150 8 150 8 152 7 152 7 154 7 154 7 155 7 155 7 157 7 157 7 158 7";

  $im = imagecreate(200,50);
  $white = imagecolorallocate($im, 0xff, 0xff, 0xff);
  $red = imagecolorallocate($im, 0xff, 0x00, 0x00);
 
  $data = "$img";
 
  $points = explode(' ', $data);  // put data into an array
  $num = count($points)/2;
  imagepolyline($im, $points, $num, $red);
 
  header ("content-type: image/jpeg");
  imagejpeg ($im, 'signature.jpg', 100);
  imagedestroy($im);

?>
[/code]

[piznac]

Once again Barand you have been a tremendous help,. that worked beautifully. Anyway i can return the favor?

[Barand]

Buy me a \_/ sometime ;D

[piznac]

anytime mate ;D

[Barand]

I'll hold you to that next time you're passing through Manchester (UK)

[onlyican]

I dont wanna pass through Manachester, now after whats just happened.
DUCK

[piznac]

Ok I now have another problem,... this dosent work on windows mobile 5,.. anyone of you guys have any experience with this OS? Or the smart phone tech?