如何保存画布上的图像

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> 

的代码基本上走的是摄像头流，并将其送入一个canvas元素。按下空格按钮会触发一个屏幕截图，然后显示为图像。由于我无法提供正在下载的文件的确切来源，因此按钮仅在浏览器的另一个选项卡中打开图像，而不是正常运行。我真的很感谢一些关于如何解决这个问题的建议。提前致谢。

我已经成功地做到捕捉从画布流与这段代码的图像：

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

我想知道的是如何使用户能够将图像保存到自己的电脑从那里。

Answer 1

关于第一个任务，可以使用画布对象支持的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; 

Answer 2

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

如果是这样，你可以使用这个片断：

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'); 

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

话虽这么说，总有使用本地存储，如文件API或索引数据库的选项 - 但这些都是沙箱您和用户将只能访问到“文件”，通过浏览器，这样也许不太方便。

Answer 3

在我的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 4

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

Answer 5

我有这个问题，这是一个没有任何外部或其他脚本库的最佳解决方案： 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> 

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