Как сохранить изображение с холста

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

Что касается первой задачи, вы можете экспортировать содержимое холста в изображение с помощью метода toDataUrl, поддерживаемого объектом canvas.

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> 

и я обновил свой код яваскрипта включить это сейчас:

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> 

Это рабочая и загружаемая ссылка выглядит как кнопка.