Question

我使用JS和HTML5画布来捕获签名。该人签署该框，单击提交，然后显示签名以获得乐趣。签名显示在PNGURL

中

我想要发生的是当用户点击提交它然后将数据发送到另一个页面时（我想重定向，而不是像AJAX一样停留在同一页面上）。发布的最佳方式是什么？我已经尝试了几个选项，但由于我是JS的新手，我似乎无法使POST正常工作。

这是我的代码

HTML CANVAS

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

        <button type="button" onclick="signatureSave()">
            Submit
        </button>
        <button type="button" onclick="signatureClear()">
            Clear signature
        </button>
        </br>
        Saved Image
        </br>
        <img id="saveSignature" alt="Saved image png"/>

    </body>
</html>

Signature.JS（我想发布的函数是signatureSave）

function signatureCapture() {
    var canvas = document.getElementById("newSignature");
    var context = canvas.getContext("2d");
    canvas.width = 560;
    canvas.height = 180;
    context.fillStyle = "#fff";
    context.strokeStyle = "#444";
    context.lineWidth = 1.5;
    context.lineCap = "round";
    context.fillRect(0, 0, canvas.width, canvas.height);
    var disableSave = true;
    var pixels = [];
    var cpixels = [];
    var xyLast = {};
    var xyAddLast = {};
    var calculate = false;
    {   //functions
        function remove_event_listeners() {
            canvas.removeEventListener('mousemove', on_mousemove, false);
            canvas.removeEventListener('mouseup', on_mouseup, false);
            canvas.removeEventListener('touchmove', on_mousemove, false);
            canvas.removeEventListener('touchend', on_mouseup, false);

            document.body.removeEventListener('mouseup', on_mouseup, false);
            document.body.removeEventListener('touchend', on_mouseup, false);
        }

        function get_coords(e) {
            var x, y;

            if (e.changedTouches && e.changedTouches[0]) {
                var offsety = canvas.offsetTop || 0;
                var offsetx = canvas.offsetLeft || 0;

                x = e.changedTouches[0].pageX - offsetx;
                y = e.changedTouches[0].pageY - offsety;
            } else if (e.layerX || 0 == e.layerX) {
                x = e.layerX;
                y = e.layerY;
            } else if (e.offsetX || 0 == e.offsetX) {
                x = e.offsetX;
                y = e.offsetY;
            }

            return {
                x : x,
                y : y
            };
        };

        function on_mousedown(e) {
            e.preventDefault();
            e.stopPropagation();

            canvas.addEventListener('mouseup', on_mouseup, false);
            canvas.addEventListener('mousemove', on_mousemove, false);
            canvas.addEventListener('touchend', on_mouseup, false);
            canvas.addEventListener('touchmove', on_mousemove, false);
            document.body.addEventListener('mouseup', on_mouseup, false);
            document.body.addEventListener('touchend', on_mouseup, false);

            empty = false;
            var xy = get_coords(e);
            context.beginPath();
            pixels.push('moveStart');
            context.moveTo(xy.x, xy.y);
            pixels.push(xy.x, xy.y);
            xyLast = xy;
        };

        function on_mousemove(e, finish) {
            e.preventDefault();
            e.stopPropagation();

            var xy = get_coords(e);
            var xyAdd = {
                x : (xyLast.x + xy.x) / 2,
                y : (xyLast.y + xy.y) / 2
            };

            if (calculate) {
                var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
                var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
                pixels.push(xLast, yLast);
            } else {
                calculate = true;
            }

            context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
            pixels.push(xyAdd.x, xyAdd.y);
            context.stroke();
            context.beginPath();
            context.moveTo(xyAdd.x, xyAdd.y);
            xyAddLast = xyAdd;
            xyLast = xy;

        };

        function on_mouseup(e) {
            remove_event_listeners();
            disableSave = false;
            context.stroke();
            pixels.push('e');
            calculate = false;
        };
    }
    canvas.addEventListener('touchstart', on_mousedown, false);
    canvas.addEventListener('mousedown', on_mousedown, false);
}

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("saveSignature").src = dataURL;

        alert(dataURL);  //making sure it works  

};

function signatureClear() {
    var canvas = document.getElementById("newSignature");
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height);
}

更新代码

<form id="hiddenForm" action="signatureaccepted.php" method="POST">
  <input type="hidden" id="hiddenDataURL" />
  <button type="button" onclick="signatureSave()">          Sign Out    </button>
</form>

Answer 1

如果您在表单中有要发布的正确的网址，则可以执行以下操作。

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

然后，当用户点击submit时，您将数据放入隐藏字段并提交表单：

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

    // this does not make sense anymore,
    // you'll abandon the page shortly and not see the image displayed!
    //document.getElementById("saveSignature").src = dataURL;

    //    alert(dataURL);  //making sure it works

    document.getElementById("hiddenDataURL").value = dataURL; // the hidden field's id
    document.getElementById("hiddenForm").submit();
}

这将负责工作并将dataURL发布到correct_post_url.php。

您将在以下网址找到数据：

$_POST['postedDataURL'] // the hidden field's name

发布内部功能

1 个答案: