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

Question

So, I am currently using webcam.js in order to first capture a still of an image. Then, I have written some java script code to pass this to a hidden variable so I can grab it on the ASP.NET code behind so I can save it to the database. This is what my javascript code looks like:

<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>

I am calling these with two html buttons that use their onclick event in order to call them, like this:

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

Just in case this has anything to with it, this is what my hidden variable looks like:

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

I would like to call these two javascript functions with one button click, rather than two. However, when I try to do so, say, by simply putting in take_snapshot(); transfer(); in one of the button's onclick, or making a new javascript function that calls both of them, I always get a lot less data being passed into the hidden variable (I mean like much less than 1/10th) than if I have it done so I need to press two html buttons to allows to me to save.

Does anyone have any idea of what is going on here? Thanks!

score 3 · Accepted Answer · answered Aug 02 '16 at 21:56

The issue is that Webcam.snap() is asynchronous, so it's not necessarily complete when transfer() is executed.

Fortunately the first argument of snap is a callback function which will wait until snap is complete to execute, so you can simply pass transfer as the first argument to snap and you should achieve the results you're looking for:

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

Patrick Evans · Answer 2 · 2016-08-02T22:05:36.210

Doing take_snapshot(); transfer(); makes the transfer() code execute before the canvas has been updated with the image data.

snap() looks to be an async operation as it takes a callback function. You need to call your transfer function within that callback, or get the data uri as the passed argument to the callback.

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+'"/>';
} );

So in your case you would want to something like:

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);

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

2 Answers2