一键调用两个 javascript 函数的结果与使用两个函数的结果不同答案

【问题标题】：Calling two javascript functions with one button click gives a different result than with two一键调用两个 javascript 函数的结果与使用两个函数的结果不同
【发布时间】：2016-12-08 10:26:28
【问题描述】：

所以，我目前正在使用 webcam.js 来首先捕获图像的静止图像。然后，我编写了一些 java 脚本代码来将其传递给一个隐藏变量，这样我就可以在后面的 ASP.NET 代码上抓取它，这样我就可以将它保存到数据库中。这是我的 javascript 代码的样子：

<script src="webcam.js"></script>
<script>
    function transfer() {
        var c = document.getElementById("myCanvas");
        var dataURL = myCanvas.toDataURL("image/png");
        dataURL = dataURL.replace('data:image/png;base64,', '');

        var hf = document.getElementById('<%=hiddensquare.ClientID%>');
            hf.value = dataURL;

        }
</script>
<script>
    function take_snapshot() {
        Webcam.snap(function () {
        }, myCanvas);
    }
</script>

我用两个 html 按钮调用它们，这些按钮使用它们的 onclick 事件来调用它们，如下所示：

<input id="btnSnap" type="button" value="Take Snapshot" onclick="take_snapshot();" />
<input id="btnTran" type="button" value="Transfer" onclick="transfer();" />

以防万一这与它有关，这就是我的隐藏变量的样子：

<asp:HiddenField ID="hiddensquare" runat="server" Value="" />

我想一键调用这两个 javascript 函数，而不是两个。但是，当我尝试这样做时，比如说，只需输入 take_snapshot();转移（）;在一个按钮的 onclick 中，或者创建一个调用它们的新 javascript 函数，我总是得到比我这样做的少得多的数据被传递到隐藏变量（我的意思是比 1/10 少得多）我需要按两个 html 按钮才能保存。

有人知道这里发生了什么吗？谢谢！

【问题讨论】：

标签： javascript html asp.net webcam.js

【解决方案1】：

问题在于Webcam.snap() 是异步的，所以在执行transfer() 时不一定是完整的。

幸运的是，snap 的第一个参数是一个回调函数，它会等到 snap 完成执行，所以你可以简单地将transfer 作为第一个参数传递给 snap，你应该会得到你想要的结果：

function take_snapshot() {
        Webcam.snap(transfer, myCanvas);
    }

【讨论】：

【解决方案2】：

执行take_snapshot(); transfer(); 会使transfer() 代码在画布更新图像数据之前执行。

snap() 看起来是一个异步操作，因为它需要一个回调函数。您需要在该回调中调用您的传输函数，或者将数据 uri 作为传递给回调的参数。

https://github.com/jhuckaby/webcamjs#user-content-snapping-a-picture

要拍照，只需调用 Webcam.snap() 函数，传入一个回调函数。 图像数据将传递给您的函数作为数据 URI，然后您可以将其显示在您的网页中，或提交到服务器。示例：
Webcam.snap( function(data_uri) {
    document.getElementById('my_result').innerHTML = '<img src="'+data_uri+'"/>';
} );

所以在你的情况下，你会想要这样的东西：

Webcam.snap( function(data_uri) {
    data_uri = data_uri.replace('data:image/png;base64,', '');
    var hf = document.getElementById('<%=hiddensquare.ClientID%>');
    hf.value = data_uri;
},myCanvas);

//or 
function transfer(data_uri) {
    data_uri = data_uri.replace('data:image/png;base64,', '');
    var hf = document.getElementById('<%=hiddensquare.ClientID%>');
    hf.value = data_uri;
}
Webcam.snap(transfer,myCanvas);

【讨论】：