jsでwindow.getusermediaで撮影した画像を保存する方法

現在、私は開いているWebappカメラで作業していますが、今はカメラの設定（ビューポートとしてのライブストリーム、写真ボタンを撮ってキャプチャし、 ...など）しかし、今私は自分のデバイスやコンピュータにユーザーのためにその画像を保存する方法の問題に走っている、このアプリは主にモバイルb2gのために設計されています。私はほとんどの人が私にセキュリティ問題を教えてくれることを知っている！私はそれを置く場所を正確にデバイスに伝えることを意味しません。jsでwindow.getusermediaで撮影した画像を保存する方法

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
    <script type="text/javascript"> 
     window.onload = function() { 
      var img = document.getElementById('embedImage'); 
      var button = document.getElementById('saveImage'); 
      img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+ 
      'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO'+ 
      '9TXL0Y4OHwAAAABJRU5ErkJggg=='; 
      img.onload = function() { 
       button.removeAttribute('disabled'); 
      }; 
      button.onclick = function() { 
       window.location.href = img.src.replace('image/png', 'image/octet-stream'); 
      }; 
     }; 
    </script> 
</head> 
<body> 
    <img id="embedImage" alt="Red dot"/> 
    <input id="saveImage" type="button" value="save image" disabled="disabled"/> 
</body> 
</html>

モバイルで実行された特定のコードは、ボタンをクリックするとファイルが自動的に保存されるようになっています。今私がやりたかったことは、自分の写真をそのvarから取り込んでそのファイルとして保存することです。例えば、ダウンロードフォルダにあります。これは私のコードは、あなたが、私はgetUserMediaで遊んでたとき、これは私のために働いたhttp://1Jamie.github.io

出典

2016-08-03 Jamie Doe

を見て作業をしたい場合は任意の助けをいただければ幸い、これは現在実行中の実装である現在https://github.com/1Jamie/1Jamie.github.io

は何かということです - [

：直接ではなく、ウィンドウの方法...

言及 - 私はあなたが適切な場合にはメソッドの名前を持っていなかったし、それがnavigator.mediaDevicesインタフェースのメソッドである旨の通知をしましたmozillのナビゲータA] https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/API/Navigator

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices

[ChromeとAndroid向けmediaDevices] https://developers.google.com/web/updates/2015/10/media-devices?hl=en

var video = document.getElementById('monitor'); 
var canvas1 = document.getElementById('photo1'); 

var img1 = document.getElementById('canvasImg'); 


navigator.mediaDevices.getUserMedia({ 
video: true 
}).then(function (stream) { 
video.srcObject = stream; 
video.onloadedmetadata = function() { 
    canvas1.width = video.videoWidth; 
    canvas1.height = video.videoHeight; 

    document.getElementById('splash').hidden = true; 
    document.getElementById('app').hidden = false; 
}; 
}).catch(function (reason) { 
document.getElementById('errorMessage').textContent = 'No camera available.'; 
}); 

function snapshot1() { 
canvas1.getContext('2d').drawImage(video, 0, 0); 
}

"save_snap" ボタンのIDです - 免責事項私はjQuery-を使用していますが、ここ、あなたは簡単に表示されるはずですあなたのコードに対応します：

$("#save_snap").click(function (event){ 

    // save canvas image as data url (png format by default) 
    var dataURL = canvas2.toDataURL(); 
    // set canvasImg image src to dataURL 
    // so it can be saved as an image 
    $('#canvasImg').attr("src" , dataURL); 
    $('#downloader').attr("download" , "download.png"); 
    $('#downloader').attr("href" , dataURL); 

    //* trying to force download - jQuery trigger does not apply 


    //Use CustomEvent Vanilla js: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent 
    // In particular 
    var event1 = new MouseEvent('click', { 
    'view': window, 
    'bubbles': true, 
    'cancelable': true 
    }); 

    //NOW we are effectively clicking the element with the href attribute: 

    //Could use jQuery selector but then we would have to unwrap it 
    // to expose it to the native js function... 
    document.getElementById('downloader').dispatchEvent(event1); 

});

出典

2016-08-03 03:36:59

jsでwindow.getusermediaで撮影した画像を保存する方法

答えて

関連する問題