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

目前我正在开发一款开放式网络应用程序相机，现在我已经实现了相机设置（实时流媒体作为视口、拍照按钮、捕捉、在角落显示拍摄的照片等），但现在我遇到了如何将用户的照片保存到他们的设备或计算机的问题，该应用程序目前主要是为移动b2g设计的。我知道大多数人都会告诉我安全问题！！！我的意思不是告诉设备具体放在哪里。我指的是之类的东西

<!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-its中获取我的照片，并将其保存为那个文件，例如，它将在downloads文件夹中。这就是我当前的代码https://github.com/1Jamie/1Jamie.github.io

任何帮助都将不胜感激，如果您想了解工作情况，这是当前正在运行的实现http://1Jamie.github.io

当我玩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

[适用于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);
});

相关内容

最新更新

热门标签：