どのように私はのWebRTCに頼ることにより、写真のブースを作成しようとしてきたと私は後の画像を保存する方法を把握することができていませんでした除き、ほぼすべてのコードを完了している

Question

最近のキャンバスから画像を保存しますそれは捕らえられている。

これは私が私の目標を達成するために、これまで来ている最も近い：

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

あなたではなく、この平均値の場合あなたのハードディスクにを直接保存してください。セキュリティ上の理由からあなたはできません。

言い換えれば、File APIやIndexed DBなどのローカルストレージを使用するオプションは常にありますが、これらはサンドボックス化されているため、ユーザーはブラウザを介して「ファイル」にしかアクセスできませんあまり便利ではない。

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> 

これは動作しており、ダウンロードリンクはボタンのように見えます。