如何从画布中保存图像 [英] How to save an image from canvas

问题描述

最近，我一直试图通过依靠Webrtc创建一个照相亭，并几乎完成了所有的代码，除非我没有找到一种方法来保存图像后，它被捕获。

Recently I've been attempting to create a photo booth by relying on Webrtc and have nearly completed all of the code except I've not been able to figure out a way to save the image after it has been captured.

这是我到达目标的最接近的目标：

This is the closest I've come so far to achieving my goal:

 <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>

代码实质上是将网络摄像机流并将其送入canvas元素。按空格按钮将触发截图，然后显示为图像。因为我无法提供正在下载的文件的确切来源，按钮只打开浏览器中的另一个选项卡中的图像，而不是正常工作。我真的很感激一些输入，如何我可以解决这个。提前致谢。

The code is essentially taking the webcam stream and feeding it into a canvas element. Pressing the space button triggers a screenshot to be taken, which then appears as an image. Because I'm unable to provide the exact source of the file that is being downloaded the button only opens the image in another tab in the browser instead of functioning properly. I would really appreciate some input as to how I can resolve this. Thanks in advance.

我已经设法使用这段代码捕获来自画布的视频流：

I've already managed to do capture the stream from the canvas in an image with this bit of code:

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

$ b

What I want to know is how to enable the user to save the image onto their computer from there.

推荐答案

我想知道的是如何让用户将图像保存到计算机上。如果我正确理解你想要下载（即提供一个保存对话框给用户选择一个位置）图像到用户的机器？'

If I understand correctly you want to download (ie. provide a save dialog for the user to pick a location) the image to user's machine?'

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

If so you can use this snippet:

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");
    }
}

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

Now all you need to do is to provide a default file name and call the function:

download(myCanvas, 'untitled.png');

如果不是这样，请直接将保存到用户的硬盘由于安全原因。

If you rather than this mean save directly to user's harddisk then you can't due to security reasons.

话虽如此，总是有使用本地存储的选项，如File API或Indexed DB - 但是因为这些是沙盒您和用户将只能通过浏览器访问文件，因此可能不那么方便。

That being said, there is always the option of using local storage such as File API or Indexed DB - but as these are sand-boxed you and the user will only have access to the "files" through the browser so perhaps not so convenient.

这篇关于如何从画布中保存图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！