我正在尝试获取此应用程序的经典ASP版本，以将图像保存到服务器：https://github.com/szimek/signature_pad
我已经尝试过使用Base64输出的各种组合，但是都没有成功。我已经搜索了该站点并搜索了Google，但找不到任何对我有意义的东西。
如果有人对如何将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文件，我可以使用Classic ASP而不是原始二进制文件将其保存到服务器。
最佳答案
在其他地方获得帮助后，我设法解决了这个问题。首先，我将签名板嵌入在表单的底部，并带有以下代码：
<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,", ""));
}
});
我希望这可以帮助其他人，因为它使我（以及我的新手编码技能）无法正常工作！