1

Web カメラから撮った写真をアップロードするにはどうすればよいですか。動作するコードを見つけました (Chrome のみ)

コードを使用しました。[写真を撮る] をクリックすると、写真が表示されますが、ソースに表示されませんか?

<video autoplay id="vid" style="display:none;"></video>
<canvas id="canvas" width="640" height="480" style="border:1px solid #d3d3d3;"></canvas><br>
<button onclick="snapshot()">Take Picture</button>

<script type="text/javascript">

var video = document.querySelector("#vid");
var canvas = document.querySelector('#canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;

var onCameraFail = function (e) {
    console.log('Camera did not work.', e);
};

function snapshot() {
    if (localMediaStream) {
        ctx.drawImage(video, 0, 0);
    }
}

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia({video:true}, function (stream) {
    video.src = window.URL.createObjectURL(stream);
    localMediaStream = stream;
}, onCameraFail);

</script>

画像要素を持つフォームに追加するにはどうすればよいですか

<input name="avatar" class="avatar" type="file" required>

ご覧のとおり、フィールドは必須なので、そのフィールドに追加すると、フォームは空ではないと見なしますか?

Opera で動作しないのはなぜですか? 私はOpera 12.15を使用しています

更新:キャンバスをイメージに変換する方法を見つけましたが、イメージにそれを埋める方法がわかりません:

a = canvas.toDataURL("image/jpeg")
document.getElementById("avatar").src = a

javascript コンソールを使用するとソースを取得できますが、フォームを検証すると、フォームは画像がまだ欠落しており、空白であると見なします。

何か案は？

4

1 に答える 1

0

300 ミリ秒で実行される snapshot() を使用して SetInterval を構築します。

ボタンは間隔を止めるだけです;)

<button onclick="clearInterval(ivl)">Take Picture</button>

var ivl = setInterval(function(){  snapshot(); },300);
于 2013-11-17T18:04:19.637 に答える