I can't get JSignature canvas data in code behind from hidden field - html

Question

I'm using jSignature to capture the users signature, after that I would like to put it into a database, I have the signature panel showing and when I send the data into an alert box I can see it, also I have a asp.net hidden field in the page were I'm storing the data, the problem is that I can't get the data into my code behind so I can store it in the database.
<telerik:RadCodeBlock runat="server">
<script src="../Scripts/JSignature/jquery-1.9.0.min.js"></script>
<script src="../Scripts/JSignature/jSignature.min.js"></script>
<script type="text/javascript">
function SaveCanvasImage() {
var image = $('#signature').jSignature('getData', 'base30');
var hdnField = $('#<%= hdnSignature.ClientID %>');
$('#<%=btnHidden.ClientID %>').click();
return false;
}
</script>
<script>
function pageLoad() {
InitSignaturePanel(); //this is a function in a global js file.
}
</script>
</telerik:RadCodeBlock>
<!--[if lt IE 9]>
<script type="text/javascript" src="../Scripts/JSignature/flashcanvas.js"></script>
<![endif]-->
<telerik:RadScriptManager runat="server"></telerik:RadScriptManager>
<div class="width400">
<telerik:RadAjaxPanel runat="server"> <asp:Label runat="server" ID="lblHidden" />
<asp:HiddenField runat="server" ID="hdnSignature" />
<div id="signature" class="trueMargin signaturePanel"></div>
</telerik:RadAjaxPanel>
<div class="textAlignCenter">
<br />
<input type="button" id="clearCanvas" value="Reset" onclick="$('#signature').jSignature('clear')" />
<asp:Button id="btnCaptureCanvas" runat="server" Text="Save and Close" OnClientClick="SaveCanvasImage()" />
<asp:Button runat="server" ID="btnHidden" OnClick="btnHidden_Click" />
</div>
</div>
And in the code behind I have:
protected void btnHidden_Click(object sender, EventArgs e)
{
lblHidden.Text = hdnSignature.Value;
}

Answer 1

Suspect this happens because you actually don't put the signature into the hidden field.
I think you mean to have this:
function SaveCanvasImage() {
var image = $('#signature').jSignature('getData', 'base30');
var hdnField = $('#<%= hdnSignature.ClientID %>').val('data:' + image.join(',')); // <-- note the addition
$('#<%=btnHidden.ClientID %>').click(); // <- what is this for by the way?
return false;
}