From de4ca696f58873036e8a5800ce02e515be66d1dc 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: Mon, 12 Oct 2020 21:02:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=98=BE=E7=A4=BA=E5=B1=8F=E5=B9=95?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 previewer/src/views/Home.vue | 47 +++++++++++++++++++++++-------------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/previewer/src/views/Home.vue b/previewer/src/views/Home.vue
index a1394cf..033436f 100644
--- a/previewer/src/views/Home.vue
+++ b/previewer/src/views/Home.vue
@@ -1,9 +1,11 @@
 <template>
   <v-container class="page">
     <v-main class="page">
-      <div class="page">
+      <div class="page canvas-container">
         <canvas
           id="screen"
+          width="454"
+          height="454"
           @mousemove="move"
           @mousedown="mouseDown"
           @mouseup="mouseUp"
@@ -102,13 +104,13 @@ export default {
       this.showTips('connected')
     },
     onmessage: function (evt) {
+      if (evt.data instanceof Blob) {
+        this.updateScreen(evt.data)
+        return
+      }
+      console.log('receive:', evt)
       const msg = JSON.parse(evt.data)
-      console.log('receive:', msg)
       switch (msg.command) {
-        case 'img':
-          console.log(msg.args)
-          this.updateScreen(msg.args)
-          break
         default:
           console.log('unknow:', msg)
       }
@@ -147,17 +149,22 @@ export default {
     },
     updateScreen: function (image) {
       const reader = new FileReader()
-      reader.onload = function (evt) {
+      reader.onload = (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)
+          const data = evt.target.result
+          const dv = new DataView(data)
+          this.screen.clearRect(0, 0, 454, 454)
+          let imgData = this.screen.createImageData(454, 454)
+          for (let i = 0; i < evt.total; i += 4) {
+            imgData.data[i] = dv.getUint8(i + 1) // r
+            imgData.data[i + 1] = dv.getUint8(i + 2) // g
+            imgData.data[i + 2] = dv.getUint8(i + 3) // b
+            imgData.data[i + 3] = dv.getUint8(i) // a
+          }
+          this.screen.putImageData(imgData, 0, 0)
         }
       }
-      reader.readAsDataURL(image)
+      reader.readAsArrayBuffer(image)
     }
   },
   created () {
@@ -168,7 +175,9 @@ export default {
     }
     uri += '//' + loc.host
     this.url = uri
-    this.url = 'ws://localhost:4096/'
+    if (process.env.NODE_ENV === 'development') {
+      this.url = 'ws://localhost:4096/'
+    }
   },
   mounted () {
     // connect websocket
@@ -187,7 +196,13 @@ export default {
   .page {
     height: 100%;
     width: 100%;
+    .canvas-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
     .screen {
+      width: 100%;
       height: 100%;
     }
     .geo {
@@ -203,8 +218,6 @@ export default {
       z-index: 100;
     }
     #screen {
-      width: 100%;
-      height: 100%;
     }
   }
 </style>
-- 
Gitee