So speichern Sie ein Bild von der Leinwand

Question

Kürzlich habe ich versucht, eine Fotozelle zu erstellen, indem ich auf Webrtc angewiesen bin und fast den gesamten Code abgeschlossen habe, außer dass ich keine Möglichkeit gefunden habe, das Bild nach zu speichern es wurde gefangen genommen.

Dies ist die nächste, die ich so weit gekommen sind, mein Ziel zu erreichen:

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

Der Code im Wesentlichen die Webcam-Stream zu nehmen und es in ein Canvas-Element zugeführt wird. Durch Drücken der Leertaste wird ein Screenshot ausgelöst, der dann als Bild erscheint. Da ich die genaue Quelle der heruntergeladenen Datei nicht angeben kann, öffnet die Schaltfläche das Bild nur auf einer anderen Registerkarte im Browser, anstatt ordnungsgemäß zu funktionieren. Ich würde wirklich etwas Input dafür schätzen, wie ich das lösen kann. Danke im Voraus.

Ich habe es geschafft, bereits mit diesem Stück Code, den Strom von der Leinwand in einem Bild zu tun erfassen:

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

Was ich möchte wissen, ist, wie die Benutzer zu ermöglichen, ihr das Bild speichern auf Computer von dort.

Answer 1

In Bezug auf die erste Aufgabe können Sie den Canvas-Inhalt mit der vom Canvas-Objekt unterstützten toDataUrl-Methode in ein Bild exportieren.

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

Wenn ich richtig verstehen Sie herunterladen möchten (dh. Bietet einen Dialog für den Benutzer speichert einen Standort wählen) das Bild des Benutzers Maschine?‘

Wenn ja, können Sie diese Schnipsel verwenden:

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

Alles was Sie jetzt tun müssen, ist eine Standard-Dateinamen zu geben und rufen Sie die Funktion:

download(myCanvas, 'untitled.png'); 

Wenn Sie lieber als dieser Mittelwert Speichern Sie direkt auf der Festplatte des Benutzers, dann können Sie aus Sicherheitsgründen nicht.

Das heißt, es gibt immer die Möglichkeit, lokalen Speicher wie File API oder indizierte DB zu verwenden - aber da diese Sand-Boxed sind, haben Sie und der Benutzer nur Zugriff auf die "Dateien" über den Browser vielleicht nicht so bequem.

Answer 3

Ich habe jetzt in meinem HTML-Code enthalten:

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

und ich habe meinen Javascript-Code aktualisiert, dies jetzt umfassen:

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

Es ist immer noch, obwohl nicht gut. Was denkt ihr? Ich schätze die Hilfe sehr.

Answer 4

Ich glaube nicht, dass es für IE möglich ist, ohne ein serverseitiges Skript einzubeziehen. Here's a good writeup on how to do it that way.

Answer 5

Ich hatte dieses Problem und das ist die beste Lösung ohne externe oder zusätzliche Script-Bibliotheken: in JavaScript-Tags oder diese Funktion Datei erstellen: Wir gehen hier davon aus, dass Leinwand Ihre Leinwand ist:

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

    } 

In der Körperteil Ihres HTML spezifizieren die Taste:

Dieses arbeitet und Downloadlink sieht wie eine Taste aus.