Switch image display to canvas

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

src/pages/detect.vue

@@ -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()
+          const imCanvas = this.$refs.image_cvs
-          imCanvas.style['background-image'] = `url(${this.imageView.src})`
+          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