Merge pull request #8 from pau-tomas/average-images

Add support for averaging images

fs/index.shtml

@@ -32,6 +32,7 @@
    --><button id="tear_btn">Tear</button><!--
    --><button id="select_all_btn" disabled>Select All</button><!--
    --><button id="delete_selected_btn" disabled>Delete</button><!--
+   --><button id="average_selected_btn" disabled>Average</button><!--
    --><br>
       <!--#RESET--> <!--#RAWDATA-->
       <br>
@@ -62,6 +63,7 @@
       const tearBtn = document.getElementById("tear_btn");
       const deleteSelectedBtn = document.getElementById("delete_selected_btn");
       const selectAllBtn = document.getElementById("select_all_btn");
+      const averageSelectedBtn = document.getElementById("average_selected_btn");
 
       Date.prototype.today = function (delim) {
           return ((this.getDate() < 10)?"0":"") + this.getDate() + delim + (((this.getMonth()+1) < 10)?"0":"") + (this.getMonth()+1) + delim + this.getFullYear();
@@ -235,17 +237,21 @@
           img.src = canvas.toDataURL();
           div.appendChild(img);
           div.appendChild(document.createElement("br"));
-          div.markedForDeletion = false;
+          div.markedForAction = false;
 
           const input = document.createElement("input");
           input.setAttribute("type", "checkbox");
           input.addEventListener("change", function() {
-            deleteSelectedBtn.disabled = !(div.markedForDeletion = (input.checked));
+            deleteSelectedBtn.disabled = !(div.markedForAction = (input.checked));
+            averageSelectedBtn.disabled = !(div.markedForAction = (input.checked));
             if  (!deleteSelectedBtn.disabled) return;
             var items = gallery.children;
             selectAllBtn.disabled = (items.length == 0);
             for (var i = 0; i < items.length; i++) {
-              if (!(deleteSelectedBtn.disabled = !(items[i].markedForDeletion))) break;
+              if (!(deleteSelectedBtn.disabled = !(items[i].markedForAction))) break;
+            }
+            for (var i = 0; i < items.length; i++) {
+              if (!(averageSelectedBtn.disabled = !(items[i].markedForAction))) break;
             }
           });
           div.appendChild(input);
@@ -291,16 +297,20 @@
         if (items.length != 0) {
           Array.from(items).forEach(item => {
             Array.from(item.getElementsByTagName("INPUT")).forEach(element => element.checked=true);
-            item.markedForDeletion = true;
+            item.markedForAction = true;
           });
           deleteSelectedBtn.disabled = false;
-        } else deleteSelectedBtn.disabled = true;
+          averageSelectedBtn.disabled = false;
+        } else {
+          deleteSelectedBtn.disabled = true;
+          averageSelectedBtn.disabled = false;
+        }
       });
 
       deleteSelectedBtn.addEventListener("click", function () {
         var items = gallery.children;
         for (var i = items.length - 1; i >= 0; i--) {
-          if (items[i].markedForDeletion) items[i].remove();
+          if (items[i].markedForAction) items[i].remove();
         }
         deleteSelectedBtn.disabled = true;
         selectAllBtn.disabled = (items.length == 0);
@@ -317,6 +327,58 @@
           });
       });
 
+      averageSelectedBtn.addEventListener("click", function() {
+        const items = gallery.children;
+
+        const avgCanvas = document.createElement('canvas');
+        const avgCtx = avgCanvas.getContext('2d');
+
+        const tmpCanvas = document.createElement('canvas');
+        const tmpCtx = tmpCanvas.getContext('2d');
+
+        // Verify that image dimensions are the same
+        const firstImg = items[0].querySelector("img");
+        const tmpW = firstImg.width;
+        const tmpH = firstImg.height;
+        for (let i = 1; i < items.length; i++) {
+          const img = items[i].querySelector("img");
+          if (tmpW != img.width || tmpH != img.height) {
+            alert("Image dimensions should be the same to do an average");
+            return;
+          } 
+        }
+
+        tmpCanvas.width = tmpW;
+        tmpCanvas.height = tmpH;
+
+        avgCanvas.width = tmpW;
+        avgCanvas.height = tmpH;
+
+        const sumImgData = [];
+        const avgImgData = avgCtx.createImageData(avgCanvas.width, avgCanvas.height);
+        let selectedItems = 0;
+        // Generate average image
+        for (let i = items.length - 1; i >= 0; i--) {
+          if (items[i].markedForAction) {
+            selectedItems++;
+            const item = items[i];
+            const img = item.querySelector("img");
+            tmpCtx.drawImage(img,0,0);
+            const tmpImgData = tmpCtx.getImageData(0, 0, tmpCanvas.width, tmpCanvas.height);
+            for (let j = 0; j < tmpImgData.data.length; j += 1) {
+              if (!sumImgData[j]) {
+                sumImgData.push(0);
+              }
+              sumImgData[j] += tmpImgData.data[j];
+            }
+          }
+        }
+        for (let i = 0; i < avgImgData.data.length; i += 1) {
+          avgImgData.data[i] = (sumImgData[i] / selectedItems);
+        }
+        avgCtx.putImageData(avgImgData, 0, 0);
+        addCanvasToGallery(avgCanvas);
+    });
     </script>
   </body>
 </html>