Question

最近我一直试图依靠Webrtc创建一个照相亭，几乎已经完成了所有的代码，除了我在拍摄后无法找到保存图像的方法。

这是我到目前为止最接近实现目标的地方：

 <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>fotogoof</title>
    <link rel="Stylesheet" href="css/bootstrap.css"/>
    <link rel="Stylesheet" href="css/style.css"/>
    <script type="text/javascript">
            window.onload = function () {
                var img = document.getElementById('screenshot');
                var button = document.getElementById('saveImage');
                img.src = '';
                img.onload = function () {
                    button.removeAttribute('disabled');
                };
                button.onclick = function () {
                    window.location.href = img.src.replace('image/png', 'image/octet-stream');
                };
            };
    </script>
    </head>
    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <h2 class="brand">Html5 Photobooth</h1>
      </div>
    </div>
    </div>
    <div class="container" id="body-wrap">
    <div class="container" id="main">
      <div class="span10">
        <div id="video-container">
        <canvas width="400" height="320" class="mask"></canvas>
          <div id="counter">
          </div>
        </div>  
        <br><div id="pic-holder" class="pull-left"><img id="screenshot"></div></br>
        <input id="saveImage" type="button" value="save image" disabled="disabled"/>
      </div>
    </div>
   </div>   
    </div>

代码实际上是将网络摄像头流转换为画布元素。按空格按钮会触发截屏，然后显示为图像。由于我无法提供正在下载的文件的确切来源，因此该按钮仅在浏览器的另一个选项卡中打开图像，而不是正常运行。我真的很感激我如何解决这个问题。提前致谢。

我已经设法使用这段代码在图像中捕获画布中的流：

document.addEventListener ('keydown', function (event) {
        if(event.keyCode == 32) {
         document.querySelector('#screenshot').src = canvas.toDataURL('image/webp')
        }
})

我想知道的是如何让用户从那里将图像保存到他们的计算机上。

Answer 1

如果我理解正确你想下载（即为用户提供一个保存对话框来选择一个位置）图像到用户的机器？'

如果是这样，您可以使用此代码段：

function download(canvas, filename) {

    /// create an "off-screen" anchor tag
    var lnk = document.createElement('a'),
        e;

    /// the key here is to set the download attribute of the a tag
    lnk.download = filename;

    /// convert canvas content to data-uri for link. When download
    /// attribute is set the content pointed to by link will be
    /// pushed as "download" in HTML5 capable browsers
    lnk.href = c.toDataURL();

    /// create a "fake" click-event to trigger the download
    if (document.createEvent) {

        e = document.createEvent("MouseEvents");
        e.initMouseEvent("click", true, true, window,
                         0, 0, 0, 0, 0, false, false, false,
                         false, 0, null);

        lnk.dispatchEvent(e);

    } else if (lnk.fireEvent) {

        lnk.fireEvent("onclick");
    }
}

现在您需要做的就是提供默认文件名并调用函数：

download(myCanvas, 'untitled.png');

如果你的意思不是将直接直接保存到用户的硬盘上，那么由于安全原因，你不能这样做。

话虽如此，总是可以选择使用本地存储，例如File API或Indexed DB - 但是因为这些是沙箱，用户只能通过浏览器访问“文件”，所以可能不会太方便了。

Answer 2

我现在将其包含在我的HTML代码中：

<div id="download">
    <p><label for="imageName">Image name:</label> <input type="text" placeholder="My Photobooth Pic" id="imageName"></p>
    <p>If you want, you can <button>Download</button> the image.</p>
</div>

我已经更新了我的javascript代码，现在就包括这个：

var _filenameInput = document.getElementById('imageName'),
var _downloadButton = document.querySelector('#download button'),

document.addEventListener ('keydown', function (event) {
            if(event.keyCode == 32) {
             document.querySelector('#screenshot').src = canvas.toDataURL('image/webp')
        }

 })

_downloadButton.addEventListener('click', _downloadImage);

var _downloadImage = function(e) {

    /** do download **/
    var imageDataUrl = canvas.toDataURL('image/png').substring(22);
    var byteArray = Base64Binary.decode(imageDataUrl);
    var blob = new Blob([byteArray], {type:'image/png'});
    var url = window.URL.createObjectURL(blob);

    var link = document.createElement('a');
    link.setAttribute('href', url);
    var filename = _filenameInput.value;
    if (!filename) {
        filename = _filenameInput.getAttribute('placeholder');
    }
    link.setAttribute('download', filename + '.png');
    link.addEventListener('click', function() {
        _downloadButton.className = 'downloaded';
    });

    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
    link.dispatchEvent(event);
};
})();
};

但它仍然不好。你们有什么感想？我非常感谢你的帮助。

Answer 3

我认为没有涉及服务器端脚本的IE可能。 Here's a good writeup on how to do it that way

Answer 4

我遇到了这个问题，这是没有任何外部或附加脚本库的最佳解决方案：在Javascript标签或文件中创建此功能：我们假设画布是你的画布：

function download(){
        var download = document.getElementById("download");
        var image = document.getElementById("canvas").toDataURL("image/png")
                    .replace("image/png", "image/octet-stream");
        download.setAttribute("href", image);

    }

在HTML的正文部分指定按钮：

<a id="download" download="image.png"><button type="button" onClick="download()">Download</button></a>

这是工作，下载链接看起来像一个按钮。

Answer 5

关于第一个任务，您可以使用canvas对象支持的toDataUrl方法将画布内容导出到图像。

var canvas = document.getElementById("canvas");
if (canvas.getContext) {
    var ctx = canvas.getContext("2d");                // Get the context for the canvas.
    var myImage = canvas.toDataURL("image/png");      // Get the data as an image.
}

var image = document.getElementById("screenshot");  // Get the image object.
image.src = myImage;

如何从画布保存图像

5 个答案: