Question

所以，我目前正在使用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按钮才能让我保存。

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

Answer 1

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

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

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

Answer 2

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

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

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

要拍照，只需调用Webcam.snap（）函数，传入一个   回调函数。 图像数据将作为a传递给您的函数   数据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);

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

2 个答案: