javascript 隐藏输入中的画布图像toDataURL在单击提交时不起作用

oyjwcjzk 于 2023-03-28 发布在 Java

关注(0)|答案(2)|浏览(138)

当用户点击提交按钮时，我试图将canvas pad的值放在隐藏输入字段中。在点击提交按钮时，值不会转到隐藏输入。

<script type="text/javascript">
            $(document).ready(function () {
                $('#myBtn1').click(function (event) {
    
                     var canvas = document.querySelector('#colors_sketch');
                   
                    var pad = new SignaturePad(canvas);
                    var data = pad.toDataURL();
                  
                    $('#savetarget').attr('src', data);
                    $('#SignatureDataUrl').val(data);
                    pad.off();
       });
            });
        </script>

<canvas id="colors_sketch" width="500" height="200" style="border: 1px solid #ccc;"></canvas>
    <input type="hidden" asp-for="SignatureDataUrl">
    <input style="float: right; margin-bottom:20px" type="submit" id="myBtn1" value="Submit" class="btn btn-primary"  />

这是SignatureDataUrl的呈现HTML

<input type="hidden" id="SignatureDataUrl" name="SignatureDataUrl" value="">

当我点击提交按钮时，我没有看到SignatureDataUrl中的任何值。任何帮助都将不胜感激。

JavaScript

来源：https://stackoverflow.com/questions/75845622/canvas-image-todataurl-in-hidden-input-not-working-on-the-click-of-submit

2条答案

按热度按时间

w1jd8yoj1#

更新：

你有这个库的最新版本吗？我看到有一个开放的问题（4个月前修复）关于从toDataUrl()方法返回空数据。尝试像这样指定类型：.toDataUrl("image/png")
另外，尝试在点击监听器之外的document.ready()回调中创建SignaturePad对象：

<script type="text/javascript">
        $(document).ready(function () {
            var canvas = document.querySelector('#colors_sketch');   
            var pad = new SignaturePad(canvas);
            
            $('#myBtn1').click(function (event) {
                var data = pad.toDataURL();
              
                $('#savetarget').attr('src', data);
                $('#SignatureDataUrl').val(data);
                pad.off();
            });
        });
    </script>

旧答案：

asp-for是一个ASP.NET Tag Helper，它将id和name属性添加到HTML标记中，但它只在服务器端工作。
如果在渲染的HTML中看到asp-for，这意味着没有生成id和name，这就是jQuery选择器不起作用的原因。
尝试将id="SignatureDataUrl"添加到隐藏输入。

<input type="hidden" id="SignatureDataUrl">

赞(0）回复(0）举报 2023-03-28

7tofc5zh2#

我已经在这个link中修复了这个问题

// correction
<input type="hidden" id='SignatureDataUrl' asp-for="SignatureDataUrl">

问题是，您正在访问id='SignatureDataUrl'，但它未定义

赞(0）回复(0）举报 2023-03-28

我来回答

javascript 隐藏输入中的画布图像toDataURL在单击提交时不起作用

2条答案

相关问题

热门标签

最新问答