Cómo guardar una imagen del canvas

Recientemente he estado intentando crear un fotomatón confiando en Webrtc y casi he completado todo el código, excepto que no he podido encontrar una manera de guardar la imagen después de que se ha capturado.

Esto es lo más cerca que he estado de alcanzar mi objective:

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


El código básicamente toma la transmisión de la cámara web y la alimenta en un elemento canvas. Al presionar el botón de espacio se activa una captura de pantalla, que luego aparece como una imagen. Como no puedo proporcionar la fuente exacta del archivo que se está descargando, el botón solo abre la imagen en otra pestaña del navegador en lugar de funcionar correctamente. Realmente agradecería algunos comentarios sobre cómo puedo resolver esto. Gracias por adelantado.

Ya he logrado capturar la transmisión desde el canvas en una imagen con este código:

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

Lo que quiero saber es cómo permitir al usuario guardar la imagen en su computadora desde allí.

Si entiendo correctamente que desea descargar (es decir, proporcionar un cuadro de diálogo para guardar para que el usuario elija una ubicación) la imagen a la máquina del usuario? ‘

Si es así puedes usar este fragmento:

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

Ahora todo lo que necesita hacer es proporcionar un nombre de archivo predeterminado y llamar a la función:

 download(myCanvas, 'untitled.png'); 

Si prefiere guardar directamente en el disco duro del usuario, no puede hacerlo por razones de seguridad.

Dicho esto, siempre existe la opción de usar almacenamiento local como File API o Indexed DB, pero como estos son sandboxados, usted y el usuario solo tendrán acceso a los “archivos” a través del navegador, por lo que tal vez no sea tan conveniente.

Ahora lo he incluido en mi código html:

 

If you want, you can the image.

y actualicé mi código javascript para incluir esto ahora:

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

Sin embargo, todavía no está bien. ¿Qué piensan ustedes? Realmente aprecio la ayuda.

No creo que sea posible para IE sin involucrar un script del lado del servidor. Aquí hay una buena reseña sobre cómo hacerlo de esa manera .

Tuve este problema y esta es la mejor solución sin bibliotecas de scripts externas o adicionales: en las tags o archivos JavaScript, cree esta función: suponemos que el canvas es su canvas:

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

En la parte del cuerpo de tu HTML, especifica el botón:

  

Esto funciona y el enlace de descarga parece un botón.

Con respecto a la primera tarea, puede exportar el contenido del canvas a una imagen con el método toDataUrl compatible con el objeto 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;