[英]Classic ASP and Signature Pad
我正在嘗試獲取此應用程序的經典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,", ""));
}
});
我希望這可以幫助其他人,因為它殺死了我(以及我的新手編碼技能),讓它正常工作!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.