Add the missing Save button to the web UI for OV5640

pull/136/head
me-no-dev 2020-03-12 19:12:43 +02:00
parent 7937d37e14
commit cfa42f74fe
2 changed files with 44 additions and 12 deletions

View File

@ -135,7 +135,7 @@
padding: 0 5px
}
button {
button, .button {
display: block;
margin: 5px;
padding: 0 12px;
@ -335,6 +335,17 @@
display: none
}
.save {
position: absolute;
right: 25px;
top: 0px;
height: 16px;
line-height: 16px;
padding: 0 4px;
text-decoration: none;
cursor: pointer
}
input[type=text] {
border: 1px solid #363636;
font-size: 14px;
@ -895,8 +906,9 @@
</div>
<figure>
<div id="stream-container" class="image-container hidden">
<a id="save-still" href="#" class="button save" download="capture.jpg">Save</a>
<div class="close" id="close-stream">×</div>
<img id="stream" src="">
<img id="stream" src="" crossorigin>
</div>
</figure>
</div>
@ -1124,6 +1136,26 @@ document.addEventListener('DOMContentLoaded', function (event) {
});
}
const saveButton = document.getElementById('save-still');
saveButton.onclick = () => {
var canvas = document.createElement("canvas");
canvas.width = view.width;
canvas.height = view.height;
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
context.drawImage(view,0,0);
try {
var dataURL = canvas.toDataURL('image/jpeg');
saveButton.href = dataURL;
var d = new Date();
saveButton.download = d.getFullYear() + ("0"+(d.getMonth()+1)).slice(-2) + ("0" + d.getDate()).slice(-2) + ("0" + d.getHours()).slice(-2) + ("0" + d.getMinutes()).slice(-2) + ("0" + d.getSeconds()).slice(-2) + ".jpg";
} catch (e) {
console.error(e);
}
canvas.parentNode.removeChild(canvas);
}
const hide = el => {
el.classList.add('hidden')
}