经典 ASP 和签名板

问题描述

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

I'm trying to get a Classic ASP version of this app to save images to my server: https://github.com/szimek/signature_pad

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

I've tried various combinations of using the Base64 output but have not had any success. I've searched this site and Googled but haven't been able to find anything that makes sense to me.

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

If anyone has any ideas on how to convert the output from Signature Pad to a server side image I would be very grateful!

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 将其保存到服务器，而不是原始二进制文件.

What I'm trying to do is have the "savePNGButton" spit out an actual PNG file that I can save to the server using Classic ASP, not the raw binary.

推荐答案

在其他地方得到一些帮助后，我设法解决了这个问题.首先，我在表单底部嵌入了签名板，代码如下:

After getting some help elsewhere, I managed to solve this problem. First of all, I had the signature pad embedded at the bottom of a form, with the following code:

    <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>

在表单内部，我有以下字段:

And inside the form, I had the following field:

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

然后在显示表单提交的页面上，我使用了以下代码(并添加了 GetTimeStamp 函数来捕获时间戳以附加到文件名以使其唯一):

Then on my page displaying the form submission, I used the following code (and added the GetTimeStamp function to capture the time stamp to append to the file name to make it unique):

    '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/.

It then saves a JPG version of the image file to a path /uploads/signatures/ on the server.

签名板下载的 app.js 文件修改如下:

The app.js file from the signature pad download was modified to the following:

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

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

I hope this helps somebody else out, as it killed me (and my novice coding skills) getting it to work!

这篇关于经典 ASP 和签名板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！