From 2394a51cc0ab20c456e904f900b229f757bbaf28 Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Fri, 30 Jun 2023 16:36:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=9B=BE=E7=89=87base64?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/AppSensitive/components/Detail.vue    | 22 ++++++++++++++++++-
 .../AppSessionArchive/components/Detail.vue   |  5 ++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/project/pidu/app/AppSensitive/components/Detail.vue b/project/pidu/app/AppSensitive/components/Detail.vue
index 8243630e..483c8686 100644
--- a/project/pidu/app/AppSensitive/components/Detail.vue
+++ b/project/pidu/app/AppSensitive/components/Detail.vue
@@ -81,7 +81,7 @@
                 </div>
 
                 <div class="img-list" v-if="item.msgType == 'image'">
-                  <img :src="item.sdkFileUrl" alt="" v-viewer>
+                  <img :src="item.src" alt="" v-viewer>
                 </div>
 
                 <div class="voice-info" v-if="item.msgType == 'voice'">
@@ -508,6 +508,14 @@
               if(item.msgType == 'location') {
                 this.initMap(item.lng, item.lat, item.zoom, index)
               }
+              if (item.msgType == "image") {
+                var image = new Image();
+                image.crossOrigin = '';
+                image.src = item.sdkFileUrl
+                image.onload = ()=>{
+                  this.$set(this.msgList[index], 'src', this.getBase64Image(image))
+                }
+              }
             })
             this.msgList = this.msgCurrent > 1 ? [ ...res.data.records, ...this.msgList]: res.data.records
             this.msgPages = res.data.pages || 2
@@ -520,12 +528,24 @@
               }
               
             })
+            
           }
           this.isLoading = false
         }).catch(() => {
           this.isLoading = false
         })
       },
+      getBase64Image(img) {
+        var canvas = document.createElement("canvas");
+        canvas.width = img.width;
+        canvas.height = img.height;
+
+        var ctx = canvas.getContext("2d");
+        ctx.drawImage(img, 0, 0, img.width, img.height);
+        var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
+        var dataURL = canvas.toDataURL("image/"+ext);
+        return dataURL;
+      },
       getMsgListPre() { //下拉加载上一页
         this.instance.post(`/app/appsessionarchiveinfo/list`, null, {
           params: {
diff --git a/project/pidu/app/AppSessionArchive/components/Detail.vue b/project/pidu/app/AppSessionArchive/components/Detail.vue
index 99a55218..ba827202 100644
--- a/project/pidu/app/AppSessionArchive/components/Detail.vue
+++ b/project/pidu/app/AppSessionArchive/components/Detail.vue
@@ -586,7 +586,9 @@ export default {
                 image.crossOrigin = '';
                 image.src = item.sdkFileUrl
                 image.onload = ()=>{
-                  item.src = this.getBase64Image(image);
+                  this.$set(this.msgList[index], 'src', this.getBase64Image(image))
+                  // item.src = this.getBase64Image(image);
+                  // console.log(this.getBase64Image(image))
                 }
               }
             });
@@ -609,6 +611,7 @@ export default {
               }
             });
           }
+          this.$forceUpdate()
           this.isLoading = false;
         })
         .catch(() => {