2

ユーザーがキャンバス フリー フォーム ペン ツールを使用して Web ページに直接署名できる機能があるサイトに取り組んでいます。ユーザーが「署名を適用」ボタンをクリックすると、ユーザーが描いた署名が画像に変換され、ページに保存され<img src="">ます (以下のコードで確認できます)。この時点まで、すべてがうまく機能します。

問題は、ユーザーがフォームを送信すると、新しく作成されたキャンバス画像を投稿変数として送信しprocess.php、署名された署名としてページにレンダリングしようとしています。image (toDataURL()) が post 変数として渡されるようですが、何らかの理由で process.php ページでレンダリングされません。画像ソースが見つからないようです。

私はJavaScriptを初めて使用し、この問題を何日も修正しようとしています。これを修正するための助けをいただければ幸いです。よろしくお願いします！

マークアップ

<div class="signature-field">
    Sign:
    <span class="sketch-container">
       <canvas id="simple_sketch" width="350" height="100"></canvas>
    </span> 
    Date: <input name="signature-date" type="text"><br/>
    <div class="signature-buttons">
        <span class="save-signature">Apply Signature | </span> 
        <span class="reset-canvas">| Reset Signature</span><br/>
    </div>
</div>


<form method="post" action="process.php">
    <input type="text" name="fname">
    <input id="signature" name="signature" type="hidden">
   <input type="submit">
</form>

JavaScript

$(function () {
    var sktch = $('#simple_sketch').sketch();
    var cleanCanvas = $('#simple_sketch')[0];

    $('.save-signature').click(function () {
        /* replace canvas with image */
        var canvas = document.getElementById("simple_sketch");
        var img = canvas.toDataURL("image/png");
        $('#simple_sketch').replaceWith('<img src="' + img + '"/>');
        $('.signature-buttons').replaceWith('');
        document.getElementById("signature").value = $('.sketch-container').html();
    });
});
4

2 に答える 2

2

ここで何をしているのかよくわかりませんが、非表示のsignatureフィールドから画像データを投稿する場合は、次のようにしてください。

document.getElementById("signature").value = document.getElementById("simple_sketch").toDataURL("image/png");

今のところ、<img>タグを含む画像データを投稿しているようです（"<img src="<DataUrl>"/>"）

于 2012-12-27T14:20:51.203 に答える
0

サーバー側のコードはどうですか、img paramの出力は空ですか？imgデータがリクエストを通じて送信されていることを確認しますか？FiddlerやWiresharkなどのパケットスニッフィングツールを試して、リクエストの内容を分析します（Firebugで簡単に確認することもできます）。

おそらく、imgデータを変換するために他のアプローチを試すことができます： https ：//developer.mozilla.org/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas

于 2012-12-27T14:20:39.427 に答える