0

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

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

4

2 回答 2

3

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

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

function take_snapshot() {
        Webcam.snap(transfer, myCanvas);
    }
于 2016-08-02T21:56:12.960 回答
0

Doingtake_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);
于 2016-08-02T21:59:53.227 回答