0

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;
  }
6
  • Porque no utilizas la propiedad de 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 atributos href y download (href hace que funcione el link solamente) y luego ejecutas un .click() al elemento
    – Jose
    Commented el 30 nov. 2019 a las 23:12
  • en tu ejemplo <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?
    – freshman
    Commented el 30 nov. 2019 a las 23:33
  • Teóricamente la imagen se guarda en base64 cuando haces ` .toDataURL();. Por lo que puedes probar a ponerlo en el href en vez en el download
    – Jose
    Commented el 30 nov. 2019 a las 23:54
  • soy nuevo en la programación y aun no se como implementar bien todo, podrías darme la linea del botón a como lo implementarías para sustituirla y ver si lo guarda, ya que he reemplazado según lo que has comentado y aun no logro hacer que funcione
    – freshman
    Commented el 1 dic. 2019 a las 0:04
  • Creas una tag <a> y le pondremos un id por ejemplo descarga que se quedará como <a id="descarga"></a>. Luego cojemos la imagen en una variable. Seleccionamos nuestro link var descar=document.getElementById("descarga"); y añadimos como se descargará la imagen descar.setAttribute("download","imagen.png"); y el contenido de la imagendescar.setAttribute("href",img.replace("image/png","image/octet-stream")); y añadimos el evento con descar.click();.
    – Jose
    Commented el 1 dic. 2019 a las 0:21

1 respuesta 1

1

Lo que deseas hacer es sencillo. Básicamente, lo que necesitas es lo siguiente:

  • Un blob que represente el archivo que descargá el usuario.
  • Un elemento HTMLAnchorElement

A este último, le debes especificar al menos dos parámetros:

  • href, en donde debe estar la URL creada a partir del blob.
  • download: el nombre del recurso.

Ejemplo

function saveImage(e) {
  e.preventDefault()
  const imageName = getImageName(e.target)
  const downloadLink = createDownloadLink(imageName)
  console.log(downloadLink)
  downloadLink.click()
}

function getImageName(form) {
  const imageName = form.imageName.value
  return imageName
}

function createDownloadLink(imageName) {
  const link = document.createElement('a')
  const sampleBlob = createSampleBlob()
  const blobUrl = window.URL.createObjectURL(sampleBlob)
  link.href = blobUrl
  link.download = imageName
  link.target = '_blank'
  link.rel = 'noopener'
  return link
}

function createSampleBlob() {
  const data = ['<a href="https://es.stackoverflow.com">Take me there!</a>']
  const blob = new Blob(data, {type : 'text/html'})
  return blob
}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
body {
  background: rgba(0,0,0,.65);
  font-family: Helvetica, arial, sans-serif;
}

.save-dialog {
  background: #fff;
  width: 400px;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  padding: 20px;
}
.save-dialog h3 {
  color: #555;
}
.save-dialog input {
  height: 44px;
  border-radius: 4px;
  border: 1px solid #bbb;
  width: 100%;
  padding: 0 16px;
  font-size: 14px;
  margin-top: 16px;
}
.save-dialog button {
  height: 44px;
  padding: 0 16px;
  border-radius: 4px;
  border: 1px solid #09c;
  background: #09c;
  color: #fff;
  font-size: 15px;
  float: right;
  margin-top: 16px;
}
.save-dialog a {
  color: #555;
  display: inline-block;
  margin-top: calc(16px + 11px);
}
<form class="save-dialog" onsubmit="saveImage(event)">
  <h3>Save as..</h3>
  <input type="text" name="imageName" placeholder="Eg. myawesomeimage" />
  <a href="#">Cancel</a>
  <button type="submit">Save to disk</button>
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.