经典 ASP 和签名板

Question

我正在尝试获取此应用的经典 ASP 版本以将图像保存到我的服务器：https://github.com/szimek/signature_pad

我尝试了各种使用 Base64 输出的组合，但都没有成功。我搜索了这个网站并用 Google 搜索，但找不到任何对我有意义的内容。

如果有人对如何将签名板的输出转换为服务器端图像有任何想法，我将不胜感激！

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 文件，我可以使用 Classic 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 版本保存到服务器上的路径 /uploads/signatures/。

签名板下载的 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,", ""));
        }
    });

我希望这对其他人有所帮助，因为它杀死了我（以及我的新手编码技能）让它工作！