saving an image created in the canvas tag

[pghcollectibles]

i am working on designing a login box where you need to "sign in" and the "image" (canvas) will be saved to a picture file and then i could use gd tools to compare pixels with an image that would be stored in my main directory instead of within the public_html directory to make it more secure.

i have read quite a few tutorials on canvas so far and have not found how i can save the drawing. i dont know if i can do something with javascript like:


var picture= new image();
// then i would need to make picture= something to do with the canvas DOM i guess


here's (http://reference.pghcollectibles.com/canvas/index.php) what i have so far...

[pghcollectibles]

i am able to get the source of the image it looks like this:

data:image/png;base64,iVBORw0KGgoAAAANSUh... (7515 characters long)

it is in this javascript variable: oImgPNG.src (oImgPNG is an image element)

how do i get that data into a file type variable. like in this form i copied from w3schools:



<form action="upload.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" />
<input type="submit" name="submit" value="Submit" />
</form>
how could i send the file info via POST like that but without the user being able to choose the file to go in the <input type"file">
do i need to create my own headers to send this info?

could i do something with this?

$source=gets_filtered($_POST["imagename"]);
$fd = fopen($source, "w");
// something something?
fclose($fd);

//or
rename($source, "upload/signinpic.png");
//although im not sure how it would know what it was renaming
how do i:
base64_ decode (http://www.php.net/manual/en/function.base64-decode.php)
[/URL][URL="http://www.php.net/manual/en/function.parse-url.php"]parse_ url (http://www.php.net/manual/en/function.get-headers.php)
rawurldecode (http://www.php.net/manual/en/function.rawurldecode.php)
urldecode (http://www.php.net/manual/en/function.urldecode.php)
or whatever?
(i am trying to do my own legwork as i write this but keep getting stuck)

did any of that make sense to anyone?

[linFox]

Put the serialised image string you have into a hidden type field on the form, not a file type field - file fields are for direct file uploads, but here it's represented as a string.

You can set the value of a form field via Javascript by: document.getElementById('formfield').value = oImgPNG.src;
where 'formfield' is the id attribute of the form field.

Then to parse the string back to the image (the image is encoded in base_64) and save it as a file, you could do something as simple as:


$imgstring = explode(",", $_POST['formfield']);
$rawimage = base64_decode($imgstring[1]);
file_put_contents("upload/signinpic.png", $rawimage);

Should work, I think.

[pghcollectibles]

that is great! it does work. i had been trying something along that line but i didnt know i had to remove the first part or if it was part of the url that i would maybe use a gd command to open an image or what. i was getting close i know. today i was going to test the gd theory but now i guess i wont need to.

then after i add the data to the element.value i use document.getElementById("sendimage").submit();

i have learned a lot of the basics but this subject was a little advanced. thanks for the help!

now i begin the process of comparing pixels in the picture.

[pghcollectibles]

ok im back

i have made this code to compare the two pictures but its not working so im hoping it was something stupid that i just cant find. it scans every pixel in both pictures and is supposed to output their color using imagecolorat() (http://us3.php.net/manual/en/function.imagecolorat.php) (just for debug purposes) and it out puts int(0) for every single pixel. i am either misunderstanding what that function does or its not scanning the right image or something.



$im1 = imagecreatefrompng("pic1.png");
$im2 = imagecreatefrompng("pic2.png");

$i=0;
$ii=0;
for($x=0;$x<400;$x++){
for($y=0;$y<100;$y++){
$nomatch="";
$rgb1 = imagecolorat($im1, $x, $y);
$r1 = ($rgb1 >> 16) & 0xFF;
$g1 = ($rgb1 >> 8) & 0xFF;
$b1 = $rgb1 & 0xFF;
$rgb2 = imagecolorat($im2, $x, $y);
$r2 = ($rgb2 >> 16) & 0xFF;
$g2 = ($rgb2 >> 8) & 0xFF;
$b2 = $rgb2 & 0xFF;
if($r1!=$r2 || $g1!=$g2 || $b1!=$b2){
$nomatch="Not a match!";
$i++;
}
echo "{$xx} {$yy}:";
var_dump($r1, $g1, $b1);
echo "<br />";
var_dump($r2, $g2, $b2);
echo "{$nomatch}<br />";
$ii++;
}
}
echo "No matches found: {$i} times out of {$ii} pixel checks."; ?>

[linFox]

You may just not have the right image paths, because it works fine for me (here (http://60.242.104.247/testo/4736.php), original code verbatim here (http://60.242.104.247/testo/4736orig.php))

[pghcollectibles]

well, after a day of reading user contributed comments in the gd section of php.net, i found a comment by p h o c i s [a-t] g m a i l c o m here (http://www.php.net/manual/en/function.imagecolorat.php) that made me think that the backround of my signature image was transparent (it is a png) and when it is loaded with imagecreatefrompng() it defaults with a black backround so the transparent part seems black and the black part is black so... it appeared as if my picture was black. i didnt even think of it when i saw all of the zeros. duh.

so here is the new section of code i am using:


$im1 = imagecreatefrompng("pic1.png");
$im2 = imagecreatefrompng("pic2.png");

$mask=222;
// Make 1st matte canvas
$im1ref = imagecreatetruecolor(400,100);
$trans_color1 = imagecolorallocatealpha($im1ref,$mask,$mask,$mask, 0);
imagefill($im1ref, 0,0,$trans_color1);
// Put the old image on the matte
imagecopy($im1ref,$im1,0,0,0,0,400,100);
// Turn the matte color into full alpha (blended pixels will not be affected)
imagecolortransparent($im1ref,$trans_color1);

//Make 2nd matte canvas
$im2sig = imagecreatetruecolor(400,100);
$trans_color2 = imagecolorallocatealpha($im2sig,$mask,$mask,$mask, 0);
imagefill($im2sig, 0,0,$trans_color2);
// Put the old image on the matte
imagecopy($im2sig,$im2,0,0,0,0,400,100);
// Turn the matte color into full alpha (blended pixels will not be affected)
imagecolortransparent($im2sig,$trans_color2);

$i=0;
$ii=0;
for($x=0;$x<400;$x++){
for($y=0;$y<100;$y++){
$nomatch="";
$rgb1 = imagecolorat($im1ref, $x, $y);
$r1 = ($rgb1 >> 16) & 0xFF;
$g1 = ($rgb1 >> 8) & 0xFF;
$b1 = $rgb1 & 0xFF;

$rgb2 = imagecolorat($im2sig, $x, $y);
$r2 = ($rgb2 >> 16) & 0xFF;
$g2 = ($rgb2 >> 8) & 0xFF;
$b2 = $rgb2 & 0xFF;
i started with the matte colors as per the example (254,254,254) like when do you ever see that color, but since mine are black (technically it makes the edges 2 pixels wide and has some bluring to it so its not just always (0,0,0) but its a gray scale non-the-less and so i made it with the variable to experiment) and (222,222,222) was easier on the eyes while debugging