我有一个签名捕获脚本,使用 JS 和 Jquery 以及 HTML Canvas 。
我正在处理签名,通过 PNGURL 将其转换为 IMAGE/PNG。我想做的是发布生成的 PNGURL 返回..但我遇到了问题。我对JS不是很熟悉,但是我已经在这方面工作了大约两天。正如您将看到的,我在发布hiddenDataURL 时遇到问题。页面发布,转发到下一页,但hiddenDataURL 显示为空。我已经用警报测试了 JS,显示签名已正确转换为 PNGURL,但它要么无法正确返回到隐藏的表单元素,要么无法正确发布到signatureaccepted.php 页面。任何帮助是极大的赞赏。
这是我的两页。
JS在单独的页面上。
function signatureSave() {
var canvas = document.getElementById("newSignature"); // save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL("image/png", 0.1);
document.getElementById("hiddenDataURL").value = dataURL;
document.getElementById("hiddenForm").submit();
};
以及我尝试发布的 HTML 表单。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="todataurl.js"></script>
<script src="signature.js"></script>
</head>
<body>
<div id="canvas">
<canvas class="roundCorners" id="newSignature" style="position: relative; margin: 0; padding: 0; border: 1px solid #c4caac;"></canvas>
</div>
<script>
signatureCapture();
</script>
<form id="hiddenForm" action="signatureaccepted.php" method="POST">
<input type="hidden" id="hiddenDataURL" />
</form>
<button type="button" onclick="signatureSave()">Sign Out</button>
<button type="button" onclick="signatureClear()">
Clear signature
</button>
</br>
Saved Image
</br>
<img id="saveSignature" alt="Saved image png" />
</body>
</html>
最佳答案
您需要输入具有 name 属性,以便与表单提交一起提交
<form id="hiddenForm" action="signatureaccepted.php" method="POST">
<input type="hidden" id="hiddenDataURL" name="hiddenDataURL"/>
</form>
它不必必须与 ID 相同,但在这种情况下,它意味着您的更改量最少
关于javascript - POST 从函数中提取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40033148/