web-dev-qa-db-ja.com

WebアプリケーションでWebカメラまたはモバイルカメラから写真を撮る

ローカルから写真を閲覧して撮影するWebアプリケーションを開発しています。また、カメラで画像をキャプチャしたいです。次のコードを使用すると、デバイスのカメラをキャプチャできます。

<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">

ここで、画像とonchangeeventを取得し、base64に変換して、そのページ自体に表示したいです。

親切に助けてください！

javascriptjqueryhtmlhtml5camera
13
ganesh

次のようにできます：

$('#cameraInput').on('change', function(e){
 $data = e.originalEvent.target.files[0];
  $reader = new FileReader();
  reader.onload = function(evt){
  $('#your_img_id').attr('src',evt.target.result);
  reader.readAsDataUrl($data);
}});
8
Henock Bongi

Miles EricksonとHenock Bongi、reader.readAsDataUrl（$ data）;を取得する必要があります。 onloadが起動するように、onload関数から。

JQueryを使用したくない場合は、以下を参照してください。

function readFile(file) {                                                       
    var reader = new FileReader();
    reader.onload = readSuccess;                                            
    function readSuccess(evt) {     
        document.getElementById("your_img_id").src = evt.target.result                   
    };
    reader.readAsDataURL(file);                                              
} 

document.getElementById('cameraInput').onchange = function(e) {
    readFile(e.srcElement.files[0]);
};
5
Ana Houa