Question

我们有一张发票供客户签名。然后，将其签名从html文件夹根目录中名为/ images的文件夹中的Signature Pad更改为.png文件。他们可以签名，但不会保存图像或将随机生成的数字中的信息添加到数据库中。它说签名已保存，但是当我打开目录时它仍然是空的。我从这里复制了代码：http://samratparida.blogspot.com/。该代码在http://www.hispeedwarez.com/crud/sign/index.php处有效运行。只是不将签名保存在/ images目录中，也不是将文件名输入数据库。

我尝试捕获该错误，但是任何地方都没有显示。我还向脚本的每个部分添加了“ Echo”，但是它们都没有回显到页面，因此我看不到它是否在混乱的地方运行。

或die（“无法打开文件进行写入”）；

和

我在ini文件中设置了error_log以及error_reporting = E_ALL | E_STRICT

但是那里什么也没有。

我还检查了apache2错误日志/var/log/apache2/error.log，它也不显示任何内容。

签名板代码在这里是index.php

    <html>
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Signature Pad</title>
    <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
    <script type="text/javascript">

    $(document).ready(function () {
    /** Set Canvas Size **/
    var canvasWidth = 400;
    var canvasHeight = 100;

    /** IE SUPPORT **/
    var canvasDiv = document.getElementById('signaturePad');
    canvas = document.createElement('canvas');
    canvas.setAttribute('width', canvasWidth);
    canvas.setAttribute('height', canvasHeight);
    canvas.setAttribute('id', 'canvas');
    canvasDiv.appendChild(canvas);
    if (typeof G_vmlCanvasManager != 'undefined') {
        canvas = G_vmlCanvasManager.initElement(canvas);
    }
    context = canvas.getContext("2d");

    var clickX = new Array();
    var clickY = new Array();
    var clickDrag = new Array();
    var paint;

    /** Redraw the Canvas **/
    function redraw() {
        canvas.width = canvas.width; // Clears the canvas

        context.strokeStyle = "#000000";
        context.lineJoin = "miter";
        context.lineWidth = 2;

        for (var i = 0; i < clickX.length; i++) {
            context.beginPath();
            if (clickDrag[i] && i) {
                context.moveTo(clickX[i - 1], clickY[i - 1]);
            } else {
                context.moveTo(clickX[i] - 1, clickY[i]);
            }
            context.lineTo(clickX[i], clickY[i]);
            context.closePath();
            context.stroke();
        }
    }

    /** Save Canvas **/
    $("#saveSig").click(function saveSig() {
        var sigData = canvas.toDataURL("image/png");
        $("#imgData").html('Thank you! Your signature was saved');
        var ajax = XMLHttpRequest();
        ajax.open("POST", 'post-html.php');
        ajax.setRequestHeader('Content-Type', 'application/upload');
        ajax.send(sigData);
    });

    /** Clear Canvas **/
    $("#clearSig").click(function clearSig() {

        clickX = new Array();
        clickY = new Array();
        clickDrag = new Array();
        canvas.width = canvas.width;
        canvas.height = canvas.height;
  });
    /**Draw when moving over Canvas **/
    $('#signaturePad').mousemove(function (e) {
        if (paint) {
            addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
            redraw();
        }
    });

    /**Stop Drawing on Mouseup **/
    $('#signaturePad').mouseup(function (e) {
        paint = false;
    });

    /** Starting a Click **/
    function addClick(x, y, dragging) {
        clickX.push(x);
        clickY.push(y);
        clickDrag.push(dragging);
    }

    $('#signaturePad').mousedown(function (e) {
        var mouseX = e.pageX - this.offsetLeft;
        var mouseY = e.pageY - this.offsetTop;

        paint = true;
        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
        redraw();
    });

    });
    </script>
    </head>
    <body>
    <center>
        <fieldset style="width: 435px">
            <br/>
            <br/>
            <div id="signaturePad" style="border: 1px solid #00C; height: 100px; width: 400px;"></div>
            <br/>
            <button  id="clearSig" type="button">Clear Signature</button>&nbsp;
            <button id="saveSig" type="button">Save Signature</button>
            <div id="imgData"></div>
            <div id="imgData"></div>
            <br/>
            <br/>
        </fieldset>
    </center>
    </body>
    </html>

second page that adds the signature to the database and writes the signature image to a file is here

if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
$session_id = $_SERVER['REMOTE_ADDR'];
// Get the data
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];

// Remove the headers (data:,) part.
// A real application should use them according to needs such as to check image type
$filteredData=substr($imageData, strpos($imageData, ",")+1);

// Need to decode before saving since the data we received is already base64 encoded
$unencodedData=base64_decode($filteredData);

//echo "unencodedData".$unencodedData;
$imageName = "sign_" . rand(5,1000) . rand(1, 10) . rand(10000, 150000) . rand(1500, 100000000) . ".png";
//Set the absolute path to your folder (i.e. /usr/home/your-domain/your-folder/
$filepath = '/var/www/html/crud/sign/images/' . $imageName;

echo("file is being opened");

$fp = fopen("$filepath", "wb") or die("unable to open file for writing"); 
fwrite($fp, $unencodedData);
fclose($fp);
echo ("file has been written");
//Connect to a mySQL database and store the user's information so you can link to it later
$link = mysql_connect('localhost','db_username', 'db_password') OR DIE(mysql_error);
mysql_select_db("sign", $link);
mysql_query("INSERT INTO customer (`session`, `image_location`) VALUES ('$session_id', '$imageName')") OR DIE(mysql_error());
mysql_close($link);
}
?>


The customer should be able to sign on the signature pad. When they click save signature, the signature should be written to the /images folder in a .png file. Then the images name should be written to the customer database so we can pull those and put them back on the invoice later on.

Right now they can sign the signature pad and it says it was saved, but nothing is saved and no signature image is being put into the /images folder.

Thanks for all your help in advanced!
-Matt

签名板图像未保存到/ images /文件夹中的文件中

0 个答案: