經典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,", "")); 
     } 
    }); 

我希望這可以幫助別人了，因爲它殺了我（和我的新手編程技能）得到它的工作！