6

最近、私は 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>

このコードは基本的に、Web カメラ ストリームを受け取り、canvas 要素にフィードします。スペース ボタンを押すと、スクリーンショットが撮影され、画像として表示されます。ダウンロードされているファイルの正確なソースを提供できないため、ボタンは適切に機能するのではなく、ブラウザーの別のタブで画像を開くだけです。これをどのように解決できるかについて、いくつかの意見をいただければ幸いです。前もって感謝します。

次のコードを使用して、キャンバスからストリームを画像にキャプチャすることができました。

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

私が知りたいのは、ユーザーがそこから自分のコンピューターに画像を保存できるようにする方法です。

4

4 に答える 4

17

私の理解が正しければ、イメージをユーザーのマシンにダウンロードしますか (つまり、ユーザーが場所を選択するための保存ダイアログを提供します)?'

その場合は、次のスニペットを使用できます。

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 やインデックス付き DB などのローカル ストレージを使用するオプションは常にありますが、これらはサンドボックス化されているため、ユーザーはブラウザーを介してのみ「ファイル」にアクセスできるため、おそらくそれほど便利ではありません。

于 2013-08-28T06:33:05.297 に答える
-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;
于 2013-08-28T06:09:01.420 に答える