单击一次按钮调用两个 javascript 函数会产生与两次单击不同的结果

Question

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

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

我想通过单击而不是两次来调用这两个 java脚本函数。但是，当我尝试这样做时，比如说，只需输入 take_snapshot();转移（）;在其中一个按钮的 onclick 中，或者创建一个新的 javascript 函数来调用它们，与如果我已经完成了，所以我需要按两个 html 按钮才能保存。

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

Answer 1

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

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

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

Answer 2

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

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

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

To snap a picture, just call the Webcam.snap() function, passing in a callback function. The image data will be passed to your function as a Data URI, which you can then display in your web page, or submit to a server. Example:
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);

单击一次按钮调用两个 javascript 函数会产生与两次单击不同的结果

Calling two javascript functions with one button click gives a different result than with two

html

javascript

asp.net

webcam.js