1

html5 キャンバスを使用して署名を取得し、MySQL に保存しています。署名を保存して MySQL に送信する部分を除いて、スクリプト内のすべてが機能しています。私の AJAX に関する知識はまったくないので、本で読んだり、チュートリアルを参照したり、ここからヘルプを得たりして取り組んでいます。

そのため、Firefox コンソールで [署名の保存] をクリックすると、スクリプトが移動先のはずの post.php ファイルを表示し、200 ok 通知を表示することがわかりますが、何も起こらず、MySQL に投稿されません (これは驚きではありません)。コードが間違っていると確信しているため)、エラーは表示されません。

私が達成したいのは、署名画像をサーバー上のフォルダーにアップロードし、その画像へのパスを MySQL に保存することです。JavaScript、Jquery、および Ajax に慣れていないため、これを機能させる方法について混乱しています。

ここにjqueryがあります：

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

/** 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);
}
var 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() {
    //encode URI
    var sigData = encodeURIComponent(canvas.toDataURL("image/png"));
$("#imgData").html('Thank you! Your signature was saved');
    var ajax = XMLHttpRequest();
    ajax.open("POST", 'post.php');
    ajax.setRequestHeader('Content-Type', 'application/upload');
    ajax.send(sigData);
   // $('#debug').html(sigData);
});

/** Clear Canvas **/
$('#clearSig').click(
    function clearSig() {
        clickX = new Array();
        clickY = new Array();
        clickDrag = new Array();
        context.clearRect(0, 0, canvas.width, 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();
});

});

ここに PHP があります: また、以下の php コードは書きませんでした。これは署名パッド全体の一部であるため、正しくないと確信しています。

<?php
session_start();
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 = "xampp/htdocs/alpha/site7/images/" . $imageName;

$fp = fopen("$filepath", 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );

//Connect to a mySQL database and store the user's information so you can link to it later
$link = mysql_connect('localhost','root', 'password') OR DIE(mysql_error);
mysql_select_db("customer", $link);
mysql_query("INSERT INTO 'signature' ('session', 'image_location') VALUES       ('$session_id', '$imageName')") OR DIE(mysql_error());
mysql_close($link);
}
?>

そしてhtml：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Signature Pad</title>

<!-- The Signature Pad -->
<script type ="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="signature-pad.js"></script>
</head>
<body>
<center>
<fieldset style="width: 435px">
    <br/>
    <br/>
    <div id="signaturePad" style="border: 1px solid #ccc; height: 55px; 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 
    <br/>
    <br/>
</fieldset>
</center>
<div id="debug"></div>
</body>
</html>

これについて頭を悩ませた後、最終的にいくつかのエラーを発見することができました。署名パッドに署名し、署名の保存ボタンを押した後、Firebug でこれらのエラーが発生します


警告: fopen(xampp/htdocs/alpha/site6/images/sign_42281643871777767.png): ストリームを開くことができませんでした: C:\xampp\htdocs\alpha\site6\post.phpにそのようなファイルまたはディレクトリはありません20行目

警告: fwrite () は、パラメータ 1 がリソースであると想定し、 21行目のC:\xampp\htdocs\alpha\site6\post.phpで指定されたブール値です警告: fclose() は、パラメータ 1 がリソースであると想定し、C:\xampp\htdocsで指定されたブール値です\alpha\site6\post.php 22行目 SQL 構文にエラーがあります。Near ''signatures' ('session', 'image_location') VALUES ('127.0.0.1', 'sign_42281643871'


私は Jquery や Ajax についての知識がなく、それらがどのように画像を作成してフォルダーに投稿しようとしているのかについて、私はこの時点でかなり行き詰っています!

4

1 に答える 1

1

私は自分の問題に答えているようです.fopenエラーが何であるかを理解しました.絶対パスを使用していなかったので、パスの開始前に / を追加すると、これの最後のエラーを除いてすべてがクリアされました. SQL 構文にエラーがあります。使用する正しい構文については、MySQL サーバーのバージョンに対応するマニュアルを確認してください

于 2013-06-10T07:58:14.950 に答える