Jump to content

Signature Applet to output image using php&GD


piznac

Recommended Posts

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
Link to comment
Share on other sites

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]
Link to comment
Share on other sites

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
Link to comment
Share on other sites

[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
Link to comment
Share on other sites

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]
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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]
Link to comment
Share on other sites

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]
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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]
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.