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>

次のように、onclick イベントを使用して呼び出す 2 つの 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="" />

これらの 2 つの JavaScript 関数を、2 回ではなく 1 回のボタン クリックで呼び出したいと思います。ただし、たとえば、単に take_snapshot(); を入れるだけでそうしようとすると、移行（）; ボタンのonclickの1つで、またはそれらの両方を呼び出す新しいjavascript関数を作成すると、隠し変数に渡されるデータが常にはるかに少なくなります（つまり、1/10よりもはるかに少ないということです）。保存するには、2 つの 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

実行take_snapshot(); transfer();するtransfer()と、キャンバスが画像データで更新される前にコードが実行されます。

snap()コールバック関数を使用するため、非同期操作のように見えます。そのコールバック内で転送関数を呼び出すか、コールバックに渡された引数としてデータ URI を取得する必要があります。

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

写真をスナップするには、Webcam.snap() 関数を呼び出し、コールバック関数を渡します。画像データは Data URI として関数に渡され、Web ページに表示したり、サーバーに送信したりできます。例：

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 に答える