<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:Arial;
color:windowtext;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>Hi Y’all:<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>I am stumped. I want to save the contents of an HTML5 canvas
to a png image file. The following code is from the Internet, but the file that
is saved is not a valid image file. So far, this is what I have: <o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>I pass the image as a 64 bit text image to the server using
the following form element:<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 color="#0000f0" face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:#0000F0'>document.form.signature_url.value
= signaturePad.toDataURL();<br>
<br>
<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color="#0000f0" face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:#0000F0'>On the server,
I: <o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=red face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:red'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 color=red face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:red'>use</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'> MIME::Base64 </span></font><font size=2 color=red
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:red'>qw</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>(
decode_base64url ); I get the same results if I use decode_base64<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 color=green face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:green'>@encoded_signature</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'> = </span></font><font size=2 color=red
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:red'>split</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>/,/, </span></font><font
size=2 color=green face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:green'>$signature_url</span></font><font size=2
color=black face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>;<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>$decoded_signature
= decode_base64url($encoded_signature[1]);<br>
<br>
<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>Then I save the
image:<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 color=green face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:green'>$filename</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'> = </span></font><font size=2 color="#0000f0"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#0000F0'>'sig_'</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>.</span></font><font
size=2 color=green face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:green'>$client_id</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>.</span></font><font size=2 color="#0000f0" face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:#0000F0'>'_'</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'>.</span></font><font size=2 color=green
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:green'>$mySqlDate</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>.</span></font><font
size=2 color="#0000f0" face="Courier New"><span style='font-size:10.0pt;
font-family:"Courier New";color:#0000F0'>'_'</span></font><font size=2
color=black face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>.</span></font><font size=2 color=green face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:green'>$sigTime</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'>.</span></font><font size=2 color="#0000f0"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#0000F0'>'.png'</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>;<br>
</span></font><font size=2 color=green face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:green'>$rootPathSigsFilename</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'> = </span></font><font size=2 color=green
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:green'>$rootPathSigs</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>.</span></font><font size=2 color="#0000f0" face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:#0000F0'>'/'</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'>.</span></font><font size=2 color=green
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:green'>$filename</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>;<br>
<br>
<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=red face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:red'>open</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'>(SIG, </span></font><font size=2 color="#0000f0"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#0000F0'>">$rootPathSigsFilename"</span></font><font size=2
color=black face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>);<br>
</span></font><font size=2 color=red face="Courier New"><span style='font-size:
10.0pt;font-family:"Courier New";color:red'>print</span></font><font size=2
color=black face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> SIG </span></font><font size=2 color=green face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:green'>$decoded_signature</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'>;<br>
</span></font><font size=2 color=red face="Courier New"><span style='font-size:
10.0pt;font-family:"Courier New";color:red'>close</span></font><font size=2
color=black face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>(SIG);<br>
<br>
<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>The image is indeed saved and it is about 30k in size but
the saved image is invalid.<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>From what I can glean the issue may have something to do
with URI versus UURL formatting, but what do I know.<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>Any suggestions will be greatly appreciated.<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>Fraser<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font></p>
</div>
</body>
</html>