From 3cc79d9ad17e538a06f2e119955b48978ca08815 Mon Sep 17 00:00:00 2001
From: shidongli <shidongli>
Date: Thu, 27 Jun 2024 09:32:29 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=9D=E6=9C=AF=E7=94=9F=E6=88=90=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/preview.js          | 30 +++++++++++----
 src/views/system/preview/index.vue | 62 +++++++++++++++++++++++++++---
 2 files changed, 80 insertions(+), 12 deletions(-)

diff --git a/src/api/system/preview.js b/src/api/system/preview.js
index 82ba112..9ac94f6 100644
--- a/src/api/system/preview.js
+++ b/src/api/system/preview.js
@@ -2,17 +2,33 @@ import request from '@/utils/request'
 
 //新增
 export function insertScriptEdgeNode(data) {
-  return request({
-    url: '/manage/script/updateScriptEdgeNode',
-    method: 'post',
-    data: data
-  })
+    return request({
+        url: '/manage/script/updateScriptEdgeNode',
+        method: 'post',
+        data: data
+    })
 }
 // 话术列表
 export function selectScriptEdgeNode(id) {
+    return request({
+      url: `/manage/script/selectScriptEdgeNode?id=${id}`,
+      method: 'get'
+    })
+  }
+// 上传
+export function uploadScriptInfo(data) {
   return request({
-    url: `/manage/script/selectScriptEdgeNode?id=${id}`,
-    method: 'get'
+      url: '/manage/script/uploadScriptInfo',
+      method: 'post',
+      data: data
+  })
+}
+// 修改接口
+export function edit(data) {
+  return request({
+      url: '/manage/script/edit',
+      method: 'put',
+      data: data
   })
 }
 
diff --git a/src/views/system/preview/index.vue b/src/views/system/preview/index.vue
index 121e3cb..154eab9 100644
--- a/src/views/system/preview/index.vue
+++ b/src/views/system/preview/index.vue
@@ -399,12 +399,12 @@
       <!-- 下载图片 -->
       <section class="save-as-image-dialog">
         <el-dialog
-          title="下载图片"
+          title="生成图片"
           :visible.sync="saveAsImageDialogVisible"
           width="360px"
         >
           <el-form label-width="100px" label-position="top">
-            <el-form-item label="选择图片格式">
+            <el-form-item label="图片格式">
               <el-select v-model="saveAsImageFormat">
                 <el-option label="jpg" value="jpg">
                   <span style="float: left">jpg</span>
@@ -412,12 +412,12 @@
                     >白色背景</span
                   >
                 </el-option>
-                <el-option label="png" value="png">
+                <!-- <el-option label="png" value="png">
                   <span style="float: left">png</span>
                   <span style="float: right; color: #8492a6; font-size: 13px"
                     >透明背景</span
                   >
-                </el-option>
+                </el-option> -->
               </el-select>
             </el-form-item>
           </el-form>
@@ -465,9 +465,10 @@
 <script>
 import G6Editor from "@antv/g6-editor";
 import mixin from "../mianview/mixin";
-import { insertScriptEdgeNode, selectScriptEdgeNode } from "@/api/system/preview";
+import { insertScriptEdgeNode, selectScriptEdgeNode, uploadScriptInfo, edit } from "@/api/system/preview";
 import Cookies from 'js-cookie'
 import { construct } from "netflix-conductor-json-tree/dist/index";
+
 export default {
   name: "VueG6Editor",
   mixins: [mixin],
@@ -787,6 +788,35 @@ export default {
         this.editor.getCurrentPage().hideGrid();
       }
     },
+
+    // 将data:image/png;base64,格式的Base64字符串转换为File对象
+    base64ToFile(base64Data, filename) {
+      const now = new Date();
+      const nowdata = now.toTimeString().split(' ')[0]; // 获取时分秒
+      console.log(nowdata,'nowdata')
+      const nowdatanew=nowdata.replace(/:/g, '-')
+      // this.attributeName.replace(/:/g, '-');
+      const name = Cookies.get('username')
+      // 将base64的数据类型前缀去掉（如果有必要）
+      const base64Regex = /^data:([^;]+);base64,/;
+      const matches = base64Data.match(base64Regex);
+      // const mimeType = matches ? matches[1] : '';
+      const mimeType = 'image/jpg';
+      const base64String = base64Data.replace(base64Regex, ''); // 获取去掉前缀的base64字符串
+      // 将base64字符串转换为二进制数据
+      const binaryString = atob(base64String);
+      const len = binaryString.length;
+      const bytes = new Uint8Array(len);
+      for (let i = 0; i < len; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+      }
+      // 将二进制数据转换为Blob对象
+      const blob = new Blob([bytes], { type: mimeType });
+      // 创建File对象
+      const file = new File([blob], nowdatanew+name + '.jpg', { type: mimeType });
+      return file;
+    },
+
     // 保存为图片
     saveAsImage() {
       let newCanvas;
@@ -804,6 +834,28 @@ export default {
         newCanvas = this.editor.getCurrentPage().saveImage();
       }
       let imageDataURL = newCanvas.toDataURL();
+      console.log(imageDataURL, 'imageDataURL')
+      const file = this.base64ToFile(imageDataURL);
+      console.log(file, '0000000000')
+      // return
+      let formDatanew = new FormData();
+      formDatanew.append("file", file);
+      console.log(formDatanew, 'formDatanew')
+      uploadScriptInfo(formDatanew).then(response => {
+        if (response.code == 200) {
+          var obj={
+            id:Cookies.get('id'),
+            scriptFilePath:response.imgUrl
+          }
+
+          edit(obj).then(response => {
+            if (response.code == 200) {
+
+            }
+          });
+        }
+      });
+      // return file;
       let downloadLink = document.createElement("a");
       downloadLink.download = "图片.jpg";
       downloadLink.href = imageDataURL;