Add clipboard image selection method

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
2024-10-04 09:28:37 -07:00
parent 9415fa3783
commit 630a8c5798
2 changed files with 28 additions and 2 deletions

View File

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

View File

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