2

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

问题是，当用户提交表单时，我试图让新创建的画布图像将其作为 post 变量提交，并在process.php页面上呈现为已签名的签名。看起来图像 (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 参数输出是空的吗？您确定正在通过请求发送 img 数据吗？尝试一些数据包嗅探工具，如 Fiddler 或 Wireshark 并分析请求的内容（您也可以使用 Firebug 快速查看）。

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

于 2012-12-27T14:20:39.427 回答