1

src/components/components/onlineWrite.vue

@@ -104,7 +104,7 @@
 
 <script>
 export default {
-  props: ["englishList", "myAnswerList1","userid"],
+  props: ["englishList", "myAnswerList1", "userid"],
   data() {
     return {
       type: 0,
@@ -115,7 +115,7 @@ export default {
       },
       uploadDialogVisible: false,
       noneBtnImg: false,
-      aiImageNav: [],
+      baseFile: "",
     };
   },
   watch: {
@@ -159,14 +159,17 @@ export default {
     uploadIsType() {
       this.type = 1;
       this.uploadDialogVisible = false;
-      // this.getImageNav();
+      this.getImageNav();
     },
-    checkImage(){
-      // if(this.myAnswerList.imgList.length > 0 && this.myAnswerList.imgList[0].url){
-      //   this.getImageNav();
-      // }else{
-      //   this.uploadDialogVisible = false;
-      // }
+    checkImage() {
+      if (
+        this.myAnswerList.imgList.length > 0 &&
+        this.myAnswerList.imgList[0].url
+      ) {
+        this.getImageNav();
+      } else {
+        this.uploadDialogVisible = false;
+      }
       this.uploadDialogVisible = false;
     },
     async beforeUpload(event) {
@@ -245,6 +248,7 @@ export default {
                 name: file.name,
                 url: data.Location,
               });
+              _this.pngToWhiteBg(file);
               _this.imgChange();
               console.log(data.Location);
               // _this.$message.success('上传成功'+data.Location)
@@ -252,8 +256,34 @@ export default {
           });
       }
     },
-    getImageNav(){
-      let url = this.myAnswerList.imgList[0].url;
+    pngToWhiteBg(file) {
+      const _file = file;
+      let read = new FileReader();
+      read.readAsDataURL(file); // 文件转base64
+      return new Promise((resolve, reject) => {
+        read.onload = (e) => {
+          let img = new Image();
+          img.src = e.target.result;
+          img.onload = async () => {
+            // 生成canvas
+            let canvas = document.createElement("canvas");
+            let context = canvas.getContext("2d");
+            // 绘制图片到canvas上
+            canvas.width = img.width;
+            canvas.height = img.height;
+
+            // 在canvas绘制前填充白色背景
+            context.fillStyle = "#fff";
+            context.fillRect(0, 0, canvas.width, canvas.height);
+            context.drawImage(img, 0, 0);
+            let base64 = canvas.toDataURL(file["type"], 1);
+            this.baseFile = base64;
+          };
+        };
+      });
+    },
+    getImageNav() {
+      let url = this.baseFile;
       const loading = this.$loading.service({
         background: "rgba(255, 255, 255)",
         target: document.querySelectorAll(".loadingImageText")[0],
@@ -262,20 +292,22 @@ export default {
         messages: [
           {
             role: "user",
-            content:[
-              { type: "image_url",text: "提取图片里面的英语文章,要求返回格式是JSON{title:'标题',content:'内容'}" },
-              { 
+            content: [
+              {
+                type: "text",
+                text: "这张图片里面有哪些文字？返回格式为{title:标题,content:内容}",
+              },
+              {
                 type: "image_url",
                 image_url: {
                   url: url,
-                  detail: "low"
-                }
-              }
-            ]
+                },
+              },
+            ],
           },
         ],
         max_tokens: 4096,
-        uid: this.userid,
+        uid: "a77e9404-efec-11e9-96f9-028edca3b798",
         stream: false,
       };
       this.ajax.post("https://gpt4.cocorobo.cn/imageAnalyse", param).then(
@@ -289,14 +321,17 @@ export default {
             loading.close();
             return;
           }
-          let aiImageNav = res.data.FunctionResponse.choices ? res.data.FunctionResponse.choices[0].message.content : '';
+          let aiImageNav = res.data.FunctionResponse.choices
+            ? res.data.FunctionResponse.choices[0].message.content
+            : "";
           try {
-            aiImageNav = JSON.parse(aiImageNav)
+            aiImageNav = JSON.parse(aiImageNav);
           } catch (error) {
-            this.getImageNav() 
+            this.getImageNav();
           }
-          console.log(aiImageNav)
-          this.aiImageNav = aiImageNav;
+          console.log(aiImageNav);
+          this.myAnswerList.engTitle = aiImageNav.title;
+          this.myAnswerList.engText = aiImageNav.content;
           this.type = 1;
           loading.close();
         },
@@ -304,7 +339,7 @@ export default {
           console.log(err);
           loading.close();
         }
-      );      
+      );
     },
   },
   mounted() {

src/components/easy2/commpont/onlineWrite.vue

@@ -31,7 +31,7 @@
       +图片上传
     </div>
 
-    <div v-if="type == 1">
+    <div class="loadingImageText" v-if="type == 1">
       <div class="ftypeBox">
         <div class="ftypeTitle">
           <div>标题：</div>
@@ -95,7 +95,7 @@
       </div>
       <div style="text-align: center">如已进行填写，确认后讲清空内容噢。</div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="uploadDialogVisible = false">取 消</el-button>
+        <el-button @click="checkImage">取 消</el-button>
         <el-button type="primary" @click="uploadIsType">确定</el-button>
       </span>
     </el-dialog>
@@ -104,7 +104,7 @@
 
 <script>
 export default {
-  props: ["englishList", "myAnswerList1"],
+  props: ["englishList", "myAnswerList1", "userid"],
   data() {
     return {
       type: 0,
@@ -115,6 +115,7 @@ export default {
       },
       uploadDialogVisible: false,
       noneBtnImg: false,
+      baseFile: "",
     };
   },
   watch: {
@@ -156,8 +157,18 @@ export default {
       this.myAnswerList.imgList = [];
     },
     uploadIsType() {
-      if (this.type == 2) {
-        this.type = 1;
+      this.type = 1;
+      this.uploadDialogVisible = false;
+      this.getImageNav();
+    },
+    checkImage() {
+      if (
+        this.myAnswerList.imgList.length > 0 &&
+        this.myAnswerList.imgList[0].url
+      ) {
+        this.getImageNav();
+      } else {
+        this.uploadDialogVisible = false;
       }
       this.uploadDialogVisible = false;
     },
@@ -237,6 +248,7 @@ export default {
                 name: file.name,
                 url: data.Location,
               });
+              _this.pngToWhiteBg(file);
               _this.imgChange();
               console.log(data.Location);
               // _this.$message.success('上传成功'+data.Location)
@@ -244,6 +256,91 @@ export default {
           });
       }
     },
+    pngToWhiteBg(file) {
+      const _file = file;
+      let read = new FileReader();
+      read.readAsDataURL(file); // 文件转base64
+      return new Promise((resolve, reject) => {
+        read.onload = (e) => {
+          let img = new Image();
+          img.src = e.target.result;
+          img.onload = async () => {
+            // 生成canvas
+            let canvas = document.createElement("canvas");
+            let context = canvas.getContext("2d");
+            // 绘制图片到canvas上
+            canvas.width = img.width;
+            canvas.height = img.height;
+
+            // 在canvas绘制前填充白色背景
+            context.fillStyle = "#fff";
+            context.fillRect(0, 0, canvas.width, canvas.height);
+            context.drawImage(img, 0, 0);
+            let base64 = canvas.toDataURL(file["type"], 1);
+            this.baseFile = base64;
+          };
+        };
+      });
+    },
+    getImageNav() {
+      let url = this.baseFile;
+      const loading = this.$loading.service({
+        background: "rgba(255, 255, 255)",
+        target: document.querySelectorAll(".loadingImageText")[0],
+      });
+      let param = {
+        messages: [
+          {
+            role: "user",
+            content: [
+              {
+                type: "text",
+                text: "这张图片里面有哪些文字？返回格式为{title:标题,content:内容}",
+              },
+              {
+                type: "image_url",
+                image_url: {
+                  url: url,
+                },
+              },
+            ],
+          },
+        ],
+        max_tokens: 4096,
+        uid: "a77e9404-efec-11e9-96f9-028edca3b798",
+        stream: false,
+      };
+      this.ajax.post("https://gpt4.cocorobo.cn/imageAnalyse", param).then(
+        (res) => {
+          if (
+            res.data.FunctionResponse &&
+            res.data.FunctionResponse.result &&
+            res.data.FunctionResponse.result == "无效请求,请重新发起对话"
+          ) {
+            this.$message.error("你的作文内容太长，无法使用图片识别!");
+            loading.close();
+            return;
+          }
+          let aiImageNav = res.data.FunctionResponse.choices
+            ? res.data.FunctionResponse.choices[0].message.content
+            : "";
+          try {
+            aiImageNav = JSON.parse(aiImageNav);
+          } catch (error) {
+            this.getImageNav();
+          }
+          console.log(aiImageNav);
+          this.myAnswerList.engTitle = aiImageNav.title;
+          this.myAnswerList.engText = aiImageNav.content;
+          this.type = 1;
+          loading.close();
+        },
+        (err) => {
+          console.log(err);
+          loading.close();
+        }
+      );
+    },
   },
   mounted() {
     if (

src/components/easy3/commpont/onlineWrite.vue

@@ -31,7 +31,7 @@
       +图片上传
     </div>
 
-    <div v-if="type == 1">
+    <div class="loadingImageText" v-if="type == 1">
       <div class="ftypeBox">
         <div class="ftypeTitle">
           <div>标题：</div>
@@ -95,7 +95,7 @@
       </div>
       <div style="text-align: center">如已进行填写，确认后讲清空内容噢。</div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="uploadDialogVisible = false">取 消</el-button>
+        <el-button @click="checkImage">取 消</el-button>
         <el-button type="primary" @click="uploadIsType">确定</el-button>
       </span>
     </el-dialog>
@@ -104,7 +104,7 @@
 
 <script>
 export default {
-  props: ["englishList", "myAnswerList1"],
+  props: ["englishList", "myAnswerList1", "userid"],
   data() {
     return {
       type: 0,
@@ -115,6 +115,7 @@ export default {
       },
       uploadDialogVisible: false,
       noneBtnImg: false,
+      baseFile: "",
     };
   },
   watch: {
@@ -156,8 +157,18 @@ export default {
       this.myAnswerList.imgList = [];
     },
     uploadIsType() {
-      if (this.type == 2) {
-        this.type = 1;
+      this.type = 1;
+      this.uploadDialogVisible = false;
+      this.getImageNav();
+    },
+    checkImage() {
+      if (
+        this.myAnswerList.imgList.length > 0 &&
+        this.myAnswerList.imgList[0].url
+      ) {
+        this.getImageNav();
+      } else {
+        this.uploadDialogVisible = false;
       }
       this.uploadDialogVisible = false;
     },
@@ -237,6 +248,7 @@ export default {
                 name: file.name,
                 url: data.Location,
               });
+              _this.pngToWhiteBg(file);
               _this.imgChange();
               console.log(data.Location);
               // _this.$message.success('上传成功'+data.Location)
@@ -244,6 +256,91 @@ export default {
           });
       }
     },
+    pngToWhiteBg(file) {
+      const _file = file;
+      let read = new FileReader();
+      read.readAsDataURL(file); // 文件转base64
+      return new Promise((resolve, reject) => {
+        read.onload = (e) => {
+          let img = new Image();
+          img.src = e.target.result;
+          img.onload = async () => {
+            // 生成canvas
+            let canvas = document.createElement("canvas");
+            let context = canvas.getContext("2d");
+            // 绘制图片到canvas上
+            canvas.width = img.width;
+            canvas.height = img.height;
+
+            // 在canvas绘制前填充白色背景
+            context.fillStyle = "#fff";
+            context.fillRect(0, 0, canvas.width, canvas.height);
+            context.drawImage(img, 0, 0);
+            let base64 = canvas.toDataURL(file["type"], 1);
+            this.baseFile = base64;
+          };
+        };
+      });
+    },
+    getImageNav() {
+      let url = this.baseFile;
+      const loading = this.$loading.service({
+        background: "rgba(255, 255, 255)",
+        target: document.querySelectorAll(".loadingImageText")[0],
+      });
+      let param = {
+        messages: [
+          {
+            role: "user",
+            content: [
+              {
+                type: "text",
+                text: "这张图片里面有哪些文字？返回格式为{title:标题,content:内容}",
+              },
+              {
+                type: "image_url",
+                image_url: {
+                  url: url,
+                },
+              },
+            ],
+          },
+        ],
+        max_tokens: 4096,
+        uid: "a77e9404-efec-11e9-96f9-028edca3b798",
+        stream: false,
+      };
+      this.ajax.post("https://gpt4.cocorobo.cn/imageAnalyse", param).then(
+        (res) => {
+          if (
+            res.data.FunctionResponse &&
+            res.data.FunctionResponse.result &&
+            res.data.FunctionResponse.result == "无效请求,请重新发起对话"
+          ) {
+            this.$message.error("你的作文内容太长，无法使用图片识别!");
+            loading.close();
+            return;
+          }
+          let aiImageNav = res.data.FunctionResponse.choices
+            ? res.data.FunctionResponse.choices[0].message.content
+            : "";
+          try {
+            aiImageNav = JSON.parse(aiImageNav);
+          } catch (error) {
+            this.getImageNav();
+          }
+          console.log(aiImageNav);
+          this.myAnswerList.engTitle = aiImageNav.title;
+          this.myAnswerList.engText = aiImageNav.content;
+          this.type = 1;
+          loading.close();
+        },
+        (err) => {
+          console.log(err);
+          loading.close();
+        }
+      );
+    },
   },
   mounted() {
     if (