I am new to Stackoverflow and web development. I am learning programming and my goal is to develop a (simple) app that stores a photo taken by the user and saves the image into the file system of the phone, where the name of the image is defined by the user.
Currently, my code opens the native camera app from the phone and places the photo as an img tag in HTML. I want to ask if it is possible to create a “save” button using javascript which will save the image in the filesystem/gallery of the user's phone. Please find the code below.
Of course, I have searched on Google and Stackoverflow for an answer. However, most questions/answers are quite old (from 2010-2014) or indicate that it is not possible in javascript.
Later on, I want to make it a progressive web app, so users from Android and iOS can easily access and download the app.
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>