diff --git a/src/pages/detect.vue b/src/pages/detect.vue index 243077d..ead910a 100644 --- a/src/pages/detect.vue +++ b/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() - 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