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>"/>" )