Question

目前我正在开发一个开放的webapp相机，现在我已经实现了相机设置（实时流作为视口，拍照按钮，捕获，在角落显示拍摄的图片等）但现在我遇到了如何将用户的图片保存到他们的设备或计算机的问题，这个应用程序目前主要是为移动b2g设计的。我知道大多数人都会告诉我安全问题！我不是说告诉设备到底放在哪里。我的意思是

{{1}}

在移动设备上执行的特定代码会触发文件，以便在单击按钮时自动保存。现在我想要做的是使用它从我的图片中取出我的图片并将其保存为该文件，例如将在下载文件夹中。这就是我的代码目前https://github.com/1Jamie/1Jamie.github.io

任何帮助都会受到赞赏，如果您想要看起来正常工作，这是当前正在运行的实施http://1Jamie.github.io

Answer 1

当我玩getUserMedia时，这对我有用 - 我注意到你在正确的情况下没有方法的名称，它是navigator.mediaDevices接口的方法 - 不是窗口的方法直接...

参考文献：

[导航器为mozilla] https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/API/Navigator

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

[mediaDevices for chrome and android] 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);
}

＆＃34; save_snap＆＃34;是一个按钮的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);

});

如何在js中保存使用window.getusermedia拍摄的照片

1 个答案: