From c29b80d058c1376a9acfb21b0af721122c276485 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=9C=E6=96=B9=E6=98=9F=E7=97=95?= <lxy5266@live.com>
Date: Thu, 8 Oct 2020 21:12:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0web=E8=BF=9E=E6=8E=A5?=
 =?UTF-8?q?=E5=B9=B6=E5=8F=91=E9=80=81=E6=95=B0=E6=8D=AE=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 previewer/src/views/Home.vue | 41 +++++++++++++++++++++++++++++-------
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/previewer/src/views/Home.vue b/previewer/src/views/Home.vue
index eae42be..b329c78 100644
--- a/previewer/src/views/Home.vue
+++ b/previewer/src/views/Home.vue
@@ -2,7 +2,7 @@
   <v-container class="page">
     <v-main class="page">
       <div class="page">
-        <canvas id="screen" @mousemove="move"></canvas>
+        <canvas id="screen" @mousemove="move" @click="click"></canvas>
         <v-icon title="Toggle Menu" class="menuicon" @click="show = !show" >{{ icons.mdiMenu }}</v-icon>
       </div>
     </v-main>
@@ -54,6 +54,16 @@ export default {
     move: function (e) {
       console.log(`(${e.layerX}, ${e.layerY})`)
     },
+    click: function (e) {
+      this.ws.send(JSON.stringify({
+        name: 'previewer',
+        command: 'click',
+        args: {
+          x: e.layerX,
+          y: e.layerY
+        }
+      }))
+    },
     showTips: function (msg) {
       this.snackbar = true
       this.tips = msg
@@ -69,13 +79,14 @@ export default {
       switch (msg.command) {
         case 'img':
           console.log(msg.args)
-          // this.updateScreen(msg.args.image)
+          this.updateScreen(msg.args)
           break
         default:
           console.log('unknow:', msg)
       }
     },
-    close: function () {
+    close: function (e) {
+      console.log('close:', e)
       this.connected = false
     },
     sendClose: function () {
@@ -87,6 +98,7 @@ export default {
       }
     },
     initWS: function () {
+      console.log('init ws')
       this.ws = new WebSocket(this.url)
       this.ws.onopen = this.open
       this.ws.onmessage = this.onmessage
@@ -105,10 +117,18 @@ export default {
       this.screen = node.getContext('2d')
     },
     updateScreen: function (image) {
-      const img = new window.Image()
-      img.src = image
-      img.crossOrigin = '*'
-      this.canvas.drawImage(img)
+      const reader = new FileReader()
+      reader.onload = function (evt) {
+        if (evt.target.readyState === FileReader.DONE) {
+          const url = evt.target.result
+          const img = new window.Image()
+          img.src = url
+          img.crossOrigin = '*'
+          this.canvas.drawImage(img)
+          document.removeChild(img)
+        }
+      }
+      reader.readAsDataURL(image)
     }
   },
   created () {
@@ -118,12 +138,17 @@ export default {
       uri = 'wss:'
     }
     uri += '//' + loc.host
-    uri += loc.pathname + 'ws'
     this.url = uri
+    // this.url = 'ws://localhost:4096'
   },
   mounted () {
+    // connect websocket
+    this.initWS()
+    // init canvas
     this.initScreen()
+    // close ws when page close
     window.οnbefοreunlοad = this.sendClose
+    // auto reconnect ws
     setInterval(this.timer, 10 * 1000)
   }
 }
-- 
Gitee