经典ASP和签名板

Question

我试图让这个程序将图像保存到我的服务器的一个经典ASP版本：https://github.com/szimek/signature_pad

我试着使用Base64编码输出的各种组合，但都没有成功。我搜索了这个网站和谷歌搜索，但一直没有找到任何有意义的东西。

如果任何人有关于如何将输出从Signature Pad转换为服务器端图像的任何想法，我将不胜感激！

的JS代码：

var wrapper = document.getElementById("signature-pad"), 
     clearButton = wrapper.querySelector("[data-action=clear]"), 
     savePNGButton = wrapper.querySelector("[data-action=save-png]"), 
     saveSVGButton = wrapper.querySelector("[data-action=save-svg]"), 
     canvas = wrapper.querySelector("canvas"), 
     signaturePad; 

    // Adjust canvas coordinate space taking into account pixel ratio, 
    // to make it look crisp on mobile devices. 
    // This also causes canvas to be cleared. 
    function resizeCanvas() { 
     // When zoomed out to less than 100%, for some very strange reason, 
     // some browsers report devicePixelRatio as less than 1 
     // and only part of the canvas is cleared then. 
     var ratio = Math.max(window.devicePixelRatio || 1, 1); 
     canvas.width = canvas.offsetWidth * ratio; 
     canvas.height = canvas.offsetHeight * ratio; 
     canvas.getContext("2d").scale(ratio, ratio); 
    } 

    window.onresize = resizeCanvas; 
    resizeCanvas(); 

    signaturePad = new SignaturePad(canvas); 

    clearButton.addEventListener("click", function (event) { 
     signaturePad.clear(); 
    }); 

    savePNGButton.addEventListener("click", function (event) { 
     if (signaturePad.isEmpty()) { 
      alert("Please provide signature first."); 
     } else { 
      window.open(signaturePad.toDataURL()); 
     } 
    }); 

    saveSVGButton.addEventListener("click", function (event) { 
     if (signaturePad.isEmpty()) { 
      alert("Please provide signature first."); 
     } else { 
      window.open(signaturePad.toDataURL('image/svg+xml')); 
     } 
    }); 

我试图做的是有“savePNGButton”吐出一个实际的PNG文件，我可以保存到使用的是经典ASP的服务器，而不是原始的二进制。

Answer 1

在别处寻求帮助后，我设法解决了这个问题。首先，我有嵌入在窗体底部的签名板，用下面的代码：

<div id="signature-pad" class="m-signature-pad">               
     <div class="m-signature-pad--body"> 
     <canvas id="imageData" name="imageData"></canvas> 
     </div>       
     <div class="m-signature-pad--footer"> 
     <div class="description" style="width: 100%; border-top: 1px dotted #999;"></div> 
     <div class="left"> 
      <button type="button" class="btn btn-warning" data-action="clear">Clear signature</button> 
     </div> 
     <div class="right"> 
      <input type="submit" class="btn btn-primary" data-action="save-png" value="Sign and accept terms"> 
     </div> 
     </div>         
    </div> 

和窗体里面，我有以下领域：

<input type="hidden" name="hiddenSignature" id="hiddenSignature" /> 

然后在我的显示表单提交页面，我用下面的代码（并添加GetTimeStamp功能捕捉时间戳附加到文件名，使其具有唯一性）：

'Run functions to capture the customer signature 
    'First function is to grab a timestamp to add to the file name 
    Function GetTimeStamp() 
     Dim dd, mm, yy, hh, nn, ss 
     Dim datevalue, timevalue, dtsnow, dtsvalue 

     'Store DateTimeStamp once. 
     dtsnow = Now() 

     'Individual date components 
     dd = Right("00" & Day(dtsnow), 2) 
     mm = Right("00" & Month(dtsnow), 2) 
     yy = Year(dtsnow) 
     hh = Right("00" & Hour(dtsnow), 2) 
     nn = Right("00" & Minute(dtsnow), 2) 
     ss = Right("00" & Second(dtsnow), 2) 

     'Build the date string in the format yyyy-mm-dd 
     datevalue = yy & "_" & mm & "_" & dd 
     'Build the time string in the format hh:mm:ss 
     timevalue = hh & "_" & nn & "_" & ss 
     'Concatenate both together to build the timestamp yyyy-mm-dd hh:mm:ss 
     dtsvalue = datevalue & "_" & timevalue 
     GetTimeStamp = dtsvalue 
    End Function 

    'Second, decode the Base64 string 
    Function SaveToBase64 (base64String) 
     Dim ImageFileName 
     Dim Doc 
     Dim nodeB64 

     ImageFileName = "signature_" & GetTimeStamp() & ".jpg" 

     Set Doc = Server.CreateObject("MSXML2.DomDocument") 
     Set nodeB64 = Doc.CreateElement("b64") 
     nodeB64.DataType = "bin.base64" 
     nodeB64.Text = Mid(base64String, InStr(base64String, ",") + 1) 

     Dim bStream 
     Set bStream = server.CreateObject("ADODB.stream") 
      bStream.type = 1 
      bStream.Open() 
      bStream.Write(nodeB64.NodeTypedValue) 
      bStream.SaveToFile Server.Mappath("/uploads/signatures/" & ImageFileName), 2 
      bStream.close() 
     Set bStream = nothing 
    End Function 
    SaveToBase64(CStr(Request.Form("hiddenSignature"))) 

然后保存为JPG VERS将图像文件添加到服务器上的路径/上传/签名/。

从签名板下载的app.js文件已被修改为以下内容：

var wrapper = document.getElementById("signature-pad"), 
     clearButton = wrapper.querySelector("[data-action=clear]"), 
     savePNGButton = wrapper.querySelector("[data-action=save-png]"), 
     saveSVGButton = wrapper.querySelector("[data-action=save-svg]"), 
     canvas = wrapper.querySelector("canvas"), 
     signaturePad; 

    // Adjust canvas coordinate space taking into account pixel ratio, 
    // to make it look crisp on mobile devices. 
    // This also causes canvas to be cleared. 
    function resizeCanvas() { 
     // When zoomed out to less than 100%, for some very strange reason, 
     // some browsers report devicePixelRatio as less than 1 
     // and only part of the canvas is cleared then. 
     var ratio = Math.max(window.devicePixelRatio || 1, 1); 
     canvas.width = canvas.offsetWidth * ratio; 
     canvas.height = canvas.offsetHeight * ratio; 
     canvas.getContext("2d").scale(ratio, ratio); 
    } 

    window.onresize = resizeCanvas; 
    resizeCanvas(); 

    signaturePad = new SignaturePad(canvas, { 
     backgroundColor: 'rgb(255, 255, 255)' 
    }); 

    clearButton.addEventListener("click", function (event) { 
     signaturePad.clear(); 
    }); 

    savePNGButton.addEventListener("click", function (event) { 
     if (signaturePad.isEmpty()) { 
      alert("Please provide signature first."); 
     } else { 
      $("#hiddenSignature").val(signaturePad.toDataURL("image/jpeg").replace("data:image/jpeg;base64,", "")); 
     } 
    }); 

我希望这可以帮助别人了，因为它杀了我（和我的新手编程技能）得到它的工作！