From 630a8c579857b9eda279e6d39835fdd585f804e6 Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Fri, 4 Oct 2024 09:28:37 -0700
Subject: [PATCH] Add clipboard image selection method

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
---
 src/components/svg-icon.vue |  4 +++-
 src/pages/detect.vue        | 26 +++++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/components/svg-icon.vue b/src/components/svg-icon.vue
index e3b27ff..f429e8a 100644
--- a/src/components/svg-icon.vue
+++ b/src/components/svg-icon.vue
@@ -19,6 +19,7 @@
     <path v-else-if="icon == 'reset_slide'" d="M520-330v-60h160v60H520Zm60 210v-50h-60v-60h60v-50h60v160h-60Zm100-50v-60h160v60H680Zm40-110v-160h60v50h60v60h-60v50h-60Zm111-280h-83q-26-88-99-144t-169-56q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-110h80v240H160v-80h94q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q129 0 226.5 79.5T831-560Z"/>
     <path v-else-if="icon == 'zoom_to'" d="M440-40v-167l-44 43-56-56 140-140 140 140-56 56-44-43v167h-80ZM220-340l-56-56 43-44H40v-80h167l-43-44 56-56 140 140-140 140Zm520 0L600-480l140-140 56 56-43 44h167v80H753l43 44-56 56Zm-260-80q-25 0-42.5-17.5T420-480q0-25 17.5-42.5T480-540q25 0 42.5 17.5T540-480q0 25-17.5 42.5T480-420Zm0-180L340-740l56-56 44 43v-167h80v167l44-43 56 56-140 140Z"/>
     <path v-else-if="icon == 'reset_zoom'" d="M480-320v-100q0-25 17.5-42.5T540-480h100v60H540v100h-60Zm60 240q-25 0-42.5-17.5T480-140v-100h60v100h100v60H540Zm280-240v-100H720v-60h100q25 0 42.5 17.5T880-420v100h-60ZM720-80v-60h100v-100h60v100q0 25-17.5 42.5T820-80H720Zm111-480h-83q-26-88-99-144t-169-56q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-110h80v240H160v-80h94q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q129 0 226.5 79.5T831-560Z"/>
+    <path v-else-if="icon == 'clipboard'" d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h167q11-35 43-57.5t70-22.5q40 0 71.5 22.5T594-840h166q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560h-80v120H280v-120h-80v560Zm280-560q17 0 28.5-11.5T520-800q0-17-11.5-28.5T480-840q-17 0-28.5 11.5T440-800q0 17 11.5 28.5T480-760Z"/>
   </svg>
 </template>
   
@@ -48,7 +49,8 @@
             'photo_sample',
             'reset_slide',
             'zoom_to',
-            'reset_zoom'
+            'reset_zoom',
+            'clipboard'
           ]
           return iconList.includes(value)
         }
diff --git a/src/pages/detect.vue b/src/pages/detect.vue
index 419d4e9..9d6c690 100644
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -116,6 +116,9 @@
         <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('file')">
           <SvgIcon icon="photo_library" />
         </f7-button>
+        <f7-button v-if="secureProtocol" style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('clipboard')">
+          <SvgIcon icon="clipboard" />
+        </f7-button>
         <f7-button v-if="demoEnabled" style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('sample')">
           <SvgIcon icon="photo_sample"/>
         </f7-button>
@@ -170,6 +173,7 @@
         serverSettings: {},
         otherSettings: {},
         isCordova: !!window.cordova,
+        secureProtocol: location.protocol == 'https:',
         uploadUid: null,
         uploadDirty: false,
         modelLocation: '',
@@ -312,7 +316,7 @@
         if (!this.getInfoUrl) return ''
         let structure = this.showResults.find( r => r.resultIndex == this.selectedChip)
         return structure ? this.getInfoUrl + structure.label.replaceAll(' ','_') : ''
-      }
+      },
     },
     methods: {
       chipGradient (confVal) {
@@ -433,6 +437,22 @@
           }).open()
           return
         }
+        if (mode == 'clipboard') {
+          navigator.clipboard.read().then(clip => {
+            if (!clip[0].types.includes("image/png")) {
+              throw new Error("Clipboard does not contain valid image data.");
+            }
+            return clip[0].getType("image/png");
+          }).then(blob => {
+            let clipImage = URL.createObjectURL(blob);
+            console.log(clipImage)
+            this.getImage(clipImage)
+          }).catch(e => {
+            console.log(e)
+            f7.dialog.alert(`Error pasting image: ${e.message}`)
+          })
+          return
+        }
         this.$refs.image_chooser.click()
       },
       onFail (message) {
@@ -532,6 +552,10 @@
             this.detecting = true
             resolve('data:image/jpg;base64,' + searchImage)
           }
+          if (this.imageLoadMode == 'clipboard') {
+            this.detecting = true
+            resolve(searchImage)
+          }
           const reader = new FileReader()
           reader.addEventListener("load", () => {
             this.detecting = true