javascript - 图像作为后置变量

Question

我正在开发一个网站，该网站有一项功能，用户可以使用 Canvas 自由形式钢笔工具直接在网页上签名。当用户单击“应用签名”按钮时，用户绘制的签名将转换为图像并以 <img src=""> 的形式保存在页面上。 (正如您在下面的代码中看到的)。到目前为止，一切都很顺利。

问题是，当用户提交表单时，我试图让新创建的 Canvas 图像作为 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();
    });
});

Answer 1

我不太确定你在这里做什么，但是如果你想通过隐藏的 signature 发布图像数据字段，只需执行以下操作:

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

目前，您似乎正在发布图像数据，包括 <img>标签 ( "<img src="<DataUrl>"/>" )