Add the missing Save button to the web UI for OV5640

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

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