Kitz ADSL Broadband Information
adsl spacer  
Support this site
Home Broadband ISPs Tech Routers Wiki Forum
   Compare ISP   Rate your ISP
   Glossary   Glossary
Please login or register.

Login with username, password and session length
Advanced search  


Pages: 1 [2]

Author Topic: how to capture a signature and insert into SQL database as IMAGE field type  (Read 12558 times)


  • Kitizen
  • ****
  • Posts: 1106

unless i've done something wrong that still doesn't work
it's still inserted the following data into the field

Code: [Select]
this is what i've amended the code to


  • Reg Member
  • ***
  • Posts: 838

Was a bit of a long shot, you could try messing with the length of the insert:
Code: [Select]
Set param = cmd.CreateParameter("@SignatureBlob", 205, 1, Len(signatureData), signatureData)
Set param = cmd.CreateParameter("@SignatureBlob", 205, 1, 30000, signatureData)

But really I guess you need the data as a Byte[], stream? 205 type is adLongVarBinary, googling got me: and

I cant try anything as I dont have the environment, so I probably cant be any help.


  • Kitizen
  • ****
  • Posts: 1106

hmm, doesn't seem to be a length issue, as what it's entering into the DB is already quite short.
seems it is the data type that is the issue, the script as it is just now is happily inserting what it's creating but it's not the format that we are expecting it to insert.

according to this

adBinary is 128, but again i'm not sure if that's what it needs to be, as the db field type is just "image".

but then it says adLongVarBinary is the correct datatype for image in SQL.


  • Reg Member
  • ***
  • Posts: 838

Give this a go:
Code: [Select]
' Check if the form is submitted
If Request.ServerVariables("REQUEST_METHOD") = "POST" Then

    ' Retrieve the signature data from the request
    Dim signatureData
    signatureData = Request.Form("signatureData")
    ' Split the base64 data from the "data:image/png;base64," part
    Dim base64String
    base64String = Mid(signatureData, InStr(signatureData, ",") + 1)

    ' From
    Set objXML = Server.CreateObject("MSXML2.DOMDocument")
    Set objDocElem = objXML.createElement("Base64Data")
    objDocElem.DataType = "bin.base64"
    objDocElem.text = base64String

    Dim conn
    Set conn = Server.CreateObject("ADODB.Connection")
    conn.Open "Driver={SQL Server}; Server=servername; Database=databasename; UID=username; PWD=password; Option=4"

    ' '@SignatureBlob' will only work when refering to a stored procedure I think, use ? and give the values in order (only 1 in this case).
    Dim sql
    'sql = "UPDATE call_events SET ce_technicians_signature_image = '@SignatureBlob' WHERE ce_Id = '56729908'"
    sql = "UPDATE call_events SET ce_technicians_signature_image = ? WHERE ce_Id = '56729908'"

    ' Create a parameterized command and set the blob value
    Dim cmd
    Set cmd = Server.CreateObject("ADODB.Command")
    cmd.ActiveConnection = conn
    cmd.CommandText = sql
    ' Create a parameter and assign the blob value
    Dim param
    ' No name required here as we used ? in the UPDATE statement
    Set param = cmd.CreateParameter( , 205, 1, LenB(objDocElem.NodeTypedValue), objDocElem.NodeTypedValue)
    'Set param = cmd.CreateParameter("@SignatureBlob", 205, 1, LenB(signatureBlob), signatureBlob)
    cmd.Parameters.Append param
    ' Cleanup
    Set param = Nothing
    Set cmd = Nothing
    Set conn = Nothing

    ' For testing can output the length of the image, or return it as a file to download
    'Response.Write LenB(objDocElem.NodeTypedValue)
    'Response.ContentType = "image/jpeg"
    'Response.AddHeader "Content-Disposition", "attachment; filename=abc.jpg"
    'Response.BinaryWrite objDocElem.NodeTypedValue

    Set objXML = Nothing
    Set objDocElem = Nothing

    Response.Write "Signature successfully saved."

End If
<!DOCTYPE html>
  <title>Signature Capture Form</title>
  <script src=""></script>
    // Initialize the signature pad
    var signaturePad;
    window.onload = function() {
      var canvas = document.getElementById('signatureCanvas');
      signaturePad = new SignaturePad(canvas, {backgroundColor: 'rgb(255, 255, 255)'});
    // Function to handle form submission
    function handleSubmit(event) {
      event.preventDefault(); // Prevent form submission
      // Get the signature as a data URL
      var signatureDataUrl = signaturePad.toDataURL("image/jpeg");
      // Set the signature data as a hidden form field
      document.getElementById('signatureData').value = signatureDataUrl;
      // Submit the form
    #signatureCanvas {
      border: 1px solid #000;
  <h1>Signature Capture Form</h1>
  <form id="signatureForm" method="post" action="">
    <label for="signatureCanvas">Please sign below:</label><br>
    <canvas id="signatureCanvas" width="400" height="200"></canvas><br>
    <input type="hidden" id="signatureData" name="signatureData" value="">
    <button type="submit" onclick="handleSubmit(event)">Submit</button>

It works as far as I can test (Server 2016, SQL 2017).

Some info in the comments, but apart from finding this stack answer that gives a nice short way of converting base64 to binary, your UPDATE statement was the reason it was putting the same value in the database everytime, if we convert "@SignatureBlob" to hex some familiar characters:
Code: [Select]
root@5022ada6fc2a:~# echo '@SignatureBlob' | xxd -p

@Parameters names seem to require a stored procedure as mentioned here, so we need to use "?" in this case. If you have a stored procedure with the signature blob as a named parameter it should work as before.
« Last Edit: June 04, 2023, 11:58:39 PM by johnson »
Pages: 1 [2]