Question

我有一个签名捕获脚本，使用JS和Jquery以及HTML画布。

我正在处理签名，通过PNGURL将其转换为IMAGE / PNG。我想做的是POST结果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>

Answer 1

您需要输入具有名称属性才能使用表单提交

<form id="hiddenForm" action="signatureaccepted.php" method="POST">
  <input type="hidden" id="hiddenDataURL" name="hiddenDataURL"/>

</form>

不必须与ID相同，但在这种情况下，它意味着您的更改量最少

从数据中提取POST数据

1 个答案: