Soy nuevo en Stackoverflow y desarrollo web. Estoy aprendiendo programación y mi objetivo es desarrollar una aplicación (simple) que almacene una foto tomada por el usuario y guarde la imagen en el sistema de archivos del teléfono, donde el usuario define el nombre de la imagen.
Actualmente, mi código abre la aplicación de cámara nativa del teléfono y coloca la foto como una etiqueta img en HTML. Quiero preguntar si es posible crear un botón "guardar" usando javascript que guardará la imagen en el sistema de archivos/galería del teléfono del usuario. Encuentre el código a continuación.
Por supuesto, he buscado en Google y Stackoverflow una respuesta. Sin embargo, la mayoría de las preguntas/respuestas son bastante antiguas (de 2010 a 2014) o indican que no es posible en javascript.
Más adelante, quiero convertirla en una aplicación web progresiva, para que los usuarios de Android e iOS puedan acceder y descargar la aplicación fácilmente.
document .getElementById("cameraFileInput") .addEventListener("change", function () { document .getElementById("pictureFromCamera") .setAttribute("src", window.URL.createObjectURL(this.files[0])); }); #cameraFileInput { display: none; } #pictureFromCamera { width: 100%; height: auto; margin-top: 16px; } .btn { display: inline-block; background-color: #00b531; color: white; padding: 8px 12px; border-radius: 4px; font-size: 16px; cursor: pointer; } .btn:hover { filter: brightness(0.9); } <html> <head> <!-- These meta tags are not necessary for the camera to work --> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Camera app</title> <!-- imports the webpage's stylesheet --> <link rel="stylesheet" href="style.css" /> <!-- imports the webpage's javascript file --> <script src="script.js" defer></script> </head> <body> <h1>Demo app</h1> <!-- The `label` is attached to the hidden file input --> <label for="cameraFileInput"> <span class="btn">Open camera</span> <!-- The hidden file `input` for opening the native camera --> <input id="cameraFileInput" type="file" accept="image/*" capture="environment" /> </label> <!-- displays the picture uploaded from the native camera --> <img id="pictureFromCamera"/> </body> </html>