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

examples/single_chip/camera_web_server/main/app_httpd.c

@@ -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;

examples/single_chip/camera_web_server/main/www/compress_pages.sh

@@ -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

examples/single_chip/camera_web_server/main/www/index_ov2640.html

@@ -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')

examples/single_chip/camera_web_server/main/www/index_ov3660.html

@@ -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')