vcc_gnd
/
esp-who
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Save button to capture window (#78) 

* Add "Save" button to capture window

Allows saving images from both stills and streams by clicking a button.

* Make image filenames be the date and time of capture

* Add script to compress the html pages for embedding
pull/99/head
Me No Dev 2019-06-20 04:43:46 +02:00 committed by XiaochaoGONG
parent 7426e27e36
commit 258751b5b6
6 changed files with 76 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/single_chip/camera_web_server/main/app_httpd.c
View File

@ -252,6 +252,7 @@ static esp_err_t capture_handler(httpd_req_t *req){
httpd_resp_set_type(req, "image/jpeg");
httpd_resp_set_hdr(req, "Content-Disposition", "inline; filename=capture.jpg");
httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
#if CONFIG_ESP_FACE_DETECT_ENABLED
size_t out_len, out_width, out_height;
@ -357,6 +358,8 @@ static esp_err_t stream_handler(httpd_req_t *req){
return res;
}
httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
while(true){
#if CONFIG_ESP_FACE_DETECT_ENABLED
detected = false;

7
examples/single_chip/camera_web_server/main/www/compress_pages.sh Executable file
View File

@ -0,0 +1,7 @@
#!/bin/bash
for file in `ls *.html`; do
echo "Compressing: $file"
cp "$file" "copy_$file" && \
gzip -f "$file" && \
mv "copy_$file" "$file"
done

35
examples/single_chip/camera_web_server/main/www/index_ov2640.html
View File

@ -135,7 +135,7 @@
padding: 0 5px
}
button {
button, .button {
display: block;
margin: 5px;
padding: 0 12px;
@ -149,6 +149,17 @@
outline: 0
}
.save {
position: absolute;
right: 25px;
top: 0px;
height: 16px;
line-height: 16px;
padding: 0 4px;
text-decoration: none;
cursor: pointer
}
button:hover {
background: #ff494d
}
@ -543,8 +554,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>
@ -657,6 +669,7 @@ document.addEventListener('DOMContentLoaded', function (event) {
const streamButton = document.getElementById('toggle-stream')
const enrollButton = document.getElementById('face_enroll')
const closeButton = document.getElementById('close-stream')
const saveButton = document.getElementById('save-still')
const stopStream = () => {
window.stop();
@ -694,6 +707,24 @@ document.addEventListener('DOMContentLoaded', function (event) {
updateConfig(enrollButton)
}
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);
}
// Attach default on change action
document
.querySelectorAll('.default-action')

BIN
examples/single_chip/camera_web_server/main/www/index_ov2640.html.gz
View File

Binary file not shown.

35
examples/single_chip/camera_web_server/main/www/index_ov3660.html
View File

@ -135,7 +135,7 @@
padding: 0 5px
}
button {
button, .button {
display: block;
margin: 5px;
padding: 0 12px;
@ -149,6 +149,17 @@
outline: 0
}
.save {
position: absolute;
right: 25px;
top: 0px;
height: 16px;
line-height: 16px;
padding: 0 4px;
text-decoration: none;
cursor: pointer
}
button:hover {
background: #ff494d
}
@ -572,8 +583,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>
@ -684,6 +696,7 @@ document.addEventListener('DOMContentLoaded', function (event) {
const streamButton = document.getElementById('toggle-stream')
const enrollButton = document.getElementById('face_enroll')
const closeButton = document.getElementById('close-stream')
const saveButton = document.getElementById('save-still')
const stopStream = () => {
window.stop();
@ -721,6 +734,24 @@ document.addEventListener('DOMContentLoaded', function (event) {
updateConfig(enrollButton)
}
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);
}
// Attach default on change action
document
.querySelectorAll('.default-action')

BIN
examples/single_chip/camera_web_server/main/www/index_ov3660.html.gz
View File

Binary file not shown.