Estoy usando el siguiente código para usar la cámara de un dispositivo para capturar una imagen, una foto fija y mostrarla en el navegador . Está funcionando bien, pero lo que me gustaría hacer es almacenar la imagen con un número único en una carpeta del sitio web y almacenar un enlace en una base de datos. Entonces, mi pregunta es cómo tomo los datos de la imagen con js y los almaceno en una carpeta con un número de referencia. Estaría muy agradecido por cualquier ayuda.
<html> <body> <video id="video" width="640" height="480" autoplay></video> <button id="snap">Take Photo</button> <canvas id="canvas" width="640" height="480"></canvas> <script> let canvas = document.querySelector("#canvas"); let context = canvas.getContext("2d"); let video = document.querySelector("#video"); if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia){ navigator.mediaDevices.getUserMedia({video: true}).then((stream) =>{ video.srcObject = stream; video.play(); }); } document.getElementById("snap").addEventListener("click", () => { context.drawImage(video, 0, 0, 640, 480); }); </script> </body> </html>Encontré el siguiente código, pero necesito un clic manual para descargar y seleccionar una carpeta
function downloadCanvas(){ // get canvas data var image = canvas.toDataURL(); // create temporary link var tmpLink = document.createElement( 'a' ); tmpLink.download = 'image.png'; // set the name of the download file tmpLink.href = image; // temporarily add link to body and initiate the download document.body.appendChild( tmpLink ); tmpLink.click(); document.body.removeChild( tmpLink ); } <button onclick="downloadCanvas()">Download Phot!</button>Tenía muchas ganas de que guardara automáticamente la imagen en la carpeta del sitio para, por ejemplo, fotos.
Te contaré el enfoque que tomé y llegué a un resultado. Para guardar un archivo, debemos ver cómo interactúa el navegador con los sistemas de archivos nativos.
Enfoque 1
¿Buscar si el navegador proporciona alguna API de este tipo para hacer eso directamente? me gusta
OS.File.writeFile (ruta de escritura, archivo)
Por lo que pude investigar, descubrí que para Chrome no proporciona una API para manejar el almacenamiento nativo. echa un vistazo aquí
Enfoque 2
¿Podemos hacer clic derecho en la imagen usando JS, es decir, el menú contextual en la imagen, y hacer clic en save image as ? En resumen, la respuesta fue no. (Intenté usar chrome.downloads.download )
Enfoque 3
¿Podemos descargar las imágenes generadas? Eso resolvería el problema. Puede consultar mi respuesta aquí .
PFA el código de trabajo para eso. Usando el método canvas.toBlob() para convertirlo en una imagen Blob y luego convertirlo en ObjectURL usando URL.createObjectURL(blob); y descargue la imagen usando esa URL.
<html> <body> <video id="video" width="640" height="480" autoplay></video> <button id="snap">Take Photo</button> <canvas id="canvas" width="640" height="480"></canvas> <script> let canvas = document.querySelector("#canvas"); let context = canvas.getContext("2d"); let video = document.querySelector("#video"); if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia){ navigator.mediaDevices.getUserMedia({video: true}).then((stream) =>{ video.srcObject = stream; video.play(); }); } document.getElementById("snap").addEventListener("click", () => { context.drawImage(video, 0, 0, 640, 480); canvas.toBlob(function(blob){ console.log(typeof(blob)) var blobUrl = URL.createObjectURL(blob); var link = document.createElement("a"); link.href = blobUrl; link.download = "image.jpg"; link.innerHTML = "Click here to download the file"; document.body.appendChild(link); document.querySelector('a').click() }, 'image/jpeg', 1); }); </script> </body> </html>Un código mínimo sería,
document.getElementById("snap").addEventListener("click", () => { context.drawImage(video, 0, 0, 640, 480); let blobUrl = canvas.toDataURL() let link = document.createElement("a"); link.href = blobUrl; console.log(link) link.download = "image.jpg"; link.innerHTML = "Click here to download the file"; document.body.appendChild(link); document.querySelector('a').click() });Pero el código anterior le brinda flexibilidad para agregar tipo mime, puede especificar la imagen como jpeg o png (predeterminado) o formato web.
Además, en lugar de la extensión jpeg , puede dar .txt si desea almacenar el formato base64 de su imagen.
Lectura adicional: Aquí
Los archivos se descargarían en la ubicación de descarga predeterminada del navegador. Puede cambiar la ubicación de descarga a la ubicación deseada o puede escribir una secuencia de comandos del sistema operativo (ya sea por batch o bash ) para mover los archivos de imagen a la ubicación del archivo del servidor.
Por favor comente si tiene más preguntas.