用一個按鈕點擊調用兩個javascript函數會產生與兩個不同的結果

所以，我目前使用webcam.js來首先捕獲靜止圖像。然後，我寫了一些Java腳本代碼將其傳遞給一個隱藏的變量，這樣我就可以將它放在後面的ASP.NET代碼中，以便將它保存到數據庫中。這是我的javascript代碼如下所示：用一個按鈕點擊調用兩個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>

我呼籲這些有，爲了利用自己的onclick事件的兩個HTML按鈕來調用它們，就像這樣：

<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按鈕才能讓我保存。

有沒有人知道這裏發生了什麼？謝謝！

來源

2016-08-02 Jimmy Lindsey

問題是Webcam.snap()是異步的，所以執行transfer()時不一定完成。

幸運卡的第一個參數是一個回調函數，它會等到扣完成執行，所以你可以簡單地傳遞transfer作爲第一個參數搶購，你應該實現你正在尋找的結果：

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

來源

2016-08-02 21:56:12

這工作！非常感謝=） –

做take_snapshot(); transfer();使代碼在畫布更新之前執行圖像數據。

snap()看起來是一個異步操作，因爲它需要一個回調函數。您需要在該回調中調用傳遞函數，或者將數據uri作爲回調的傳遞參數。

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

要拍攝照片，只需調用Webcam.snap（）函數，傳遞一個回調函數。 圖像數據將作爲數據URI傳遞到您的功能，然後您可以在網頁中顯示數據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-02 21:59:53

用一個按鈕點擊調用兩個javascript函數會產生與兩個不同的結果

回答

相關問題