Question

我正在开发一个网站，其中有一项功能，用户可以使用无画布工具笔直接在网页上签名。当用户单击“应用签名”按钮时，用户绘制的签名将转换为图像并以<img src="">的形式保存在页面上（如下面的代码所示）。到目前为止，一切都很好。

问题是，当用户提交表单时，我试图将新创建的画布图像作为post变量提交并在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();
    });
});

Answer 1

我不太清楚你在这里做了什么，但如果你想通过隐藏的signature字段发布图像数据，只需这样做：

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

现在看来，您发布的图片数据似乎包括<img>代码（"<img src="<DataUrl>"/>"）

Answer 2

你的服务器端代码怎么样，img param输出是空的？您确定img数据是通过请求发送的吗？尝试一些像Fiddler或Wireshark这样的数据包嗅探工具并分析请求的内容（你也可以快速查看Firebug）。

也许您可以尝试其他方法来转换img数据： https://developer.mozilla.org/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas

图像作为后期变量

2 个答案: