En base al siguiente código, estoy buscando la forma de poder descargar la imagen tomada por la cámara que trae integrada el equipo, hasta ahora la almacena en una variable local, le integre un botón de guardar pero aun no se como hacer para abrir el cuadro de dialogo Guardar como: (esto dependerá de cada navegador ya que algunos descargan sin abrir ese dialogo), solo necesito que funcione el botón Save photo
.
index.html
<!doctype html>
<html>
<head>
<title>Title</title>
<meta charset='utf-8'>
<link rel="stylesheet" href="style.css" type="text/css" media="all">
<script src="script.js"></script>
</head>
<body>
<div class="contentarea">
<div class="camera">
<video id="video">Video stream not available.</video>
<button id="startbutton">Take photo</button>
</div>
<canvas id="canvas">
</canvas>
<div class="output">
<img id="photo" alt="The screen capture will appear in this box.">
<button id="savebutton">Save photo</button>
</div>
</div>
</body>
</html>
script.js
(function() {
var width = 320;
var height = 0;
var streaming = false;
var video = null;
var canvas = null;
var photo = null;
var startbutton = null;
function startup() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
photo = document.getElementById('photo');
startbutton = document.getElementById('startbutton');
navigator.mediaDevices.getUserMedia({video: true, audio: false})
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(err) {
console.log("An error occurred: " + err);
});
video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight / (video.videoWidth/width);
if (isNaN(height)) {
height = width / (4/3);
}
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
startbutton.addEventListener('click', function(ev){
takepicture();
ev.preventDefault();
}, false);
clearphoto();
}
function clearphoto() {
var context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
function takepicture() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
} else {
clearphoto();
}
}
window.addEventListener('load', startup, false);
})();
style.css
#video {
border: 1px solid black;
box-shadow: 2px 2px 3px black;
width:320px;
height:240px;
}
#photo {
border: 1px solid black;
box-shadow: 2px 2px 3px black;
width:320px;
height:240px;
}
#canvas {
display:none;
}
.camera {
width: 340px;
display:inline-block;
}
.output {
width: 340px;
display:inline-block;
}
#startbutton {
display:block;
position:relative;
margin-left:auto;
margin-right:auto;
bottom:32px;
background-color: rgba(0, 150, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
font-size: 14px;
font-family: "Lucida Grande", "Arial", sans-serif;
color: rgba(255, 255, 255, 1.0);
}
#savebutton {
display:block;
position:relative;
margin-left:auto;
margin-right:auto;
bottom:32px;
background-color: rgba(0, 150, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
font-size: 14px;
font-family: "Lucida Grande", "Arial", sans-serif;
color: rgba(255, 255, 255, 1.0);
}
.contentarea {
font-size: 16px;
font-family: "Lucida Grande", "Arial", sans-serif;
width: 760px;
}
download
en un link<a>
. Por ejemplo<a href="texto cualquiera" download="url_fichero">Descargar</a>
. Esto lo puedes hacer creando un elemento<a>
y luego añadirle los atributoshref
ydownload
(href
hace que funcione el link solamente) y luego ejecutas un.click()
al elemento<a href="texto cualquiera" download="url_fichero">Descargar</a>
href puede quedar vacío y aun así funciona el código ya que si escribo algo me enviara a otra pagina y en download seria el nombre para descargar el archivo, pero como jalo la imagen que se mantiene en la variable y no en mi equipo?.toDataURL();
. Por lo que puedes probar a ponerlo en elhref
en vez en eldownload
<a>
y le pondremos un id por ejemplodescarga
que se quedará como<a id="descarga"></a>
. Luego cojemos la imagen en una variable. Seleccionamos nuestro linkvar descar=document.getElementById("descarga");
y añadimos como se descargará la imagendescar.setAttribute("download","imagen.png");
y el contenido de la imagendescar.setAttribute("href",img.replace("image/png","image/octet-stream"));
y añadimos el evento condescar.click();
.