ALVINN/ALVINN_f7
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Switch image display to canvas

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2024-09-15 12:58:08 -07:00
parent 8ba930ed2e
commit 47363b9a4c
1 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/detect.vue
View File

@@ -160,6 +160,7 @@
classesList: [],
imageLoaded: false,
imageView: new Image(),
imCvsLocation: {},
imageLoadMode: "environment",
detecting: false,
detectPanel: false,
@@ -476,6 +477,9 @@
imageCtx.globalAlpha = 1
imageCtx.strokeStyle = 'yellow'
imageCtx.lineWidth = 3
if (this.imageLoaded) {
imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, this.imCvsLocation.left, this.imCvsLocation.top, this.imCvsLocation.width, this.imCvsLocation.height)
}
return [imCanvas, imageCtx]
},
getImage (searchImage) {
@@ -516,8 +520,16 @@
this.imageView.src = imgData
return(this.imageView.decode())
}).then( () => {
const [imCanvas, _] = this.resetView()
imCanvas.style['background-image'] = `url(${this.imageView.src})`
const imCanvas = this.$refs.image_cvs
imCanvas.width = imCanvas.clientWidth
imCanvas.height = imCanvas.clientHeight
const imageCtx = imCanvas.getContext("2d")
let imageLoc = this.box2cvs({top: 0,left: 0,right: 1,bottom: 1})
this.imCvsLocation.top = imageLoc[0].cvsTop
this.imCvsLocation.left = imageLoc[0].cvsLeft
this.imCvsLocation.width = imageLoc[0].cvsRight - imageLoc[0].cvsLeft
this.imCvsLocation.height = imageLoc[0].cvsBottom - imageLoc[0].cvsTop
imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, this.imCvsLocation.left, this.imCvsLocation.top, this.imCvsLocation.width, this.imCvsLocation.height)
f7.utils.nextFrame(() => {
this.setData()
})
@@ -552,7 +564,9 @@
box2cvs(boxInput) {
if (!boxInput || boxInput.length == 0) return []
const boxList = boxInput.length ? boxInput : [boxInput]
const [imCanvas, imageCtx] = this.resetView()
//const [imCanvas, imageCtx] = this.resetView()
const imCanvas = this.$refs.image_cvs
//const imageCtx = imCanvas.getContext("2d")
var imgWidth
var imgHeight
const imgAspect = this.imageView.width / this.imageView.height