From 308465adb4d18998f831ab924db34b2213f6afbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E4=BA=86=E4=B8=AA=E7=99=BD?= <543593352@qq.com>
Date: Thu, 12 Dec 2024 16:44:03 +0800
Subject: [PATCH] =?UTF-8?q?ppts=EF=BC=9A=2064=E8=BD=ACfile=20=E6=8F=90?=
 =?UTF-8?q?=E5=8F=96=E5=88=B0utils=20image=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/src/AixPPTist/src/utils/image.ts | 51 ++++++++++++++++++
 .../src/views/Editor/CanvasTool/index.vue     | 52 +------------------
 2 files changed, 53 insertions(+), 50 deletions(-)

diff --git a/src/renderer/src/AixPPTist/src/utils/image.ts b/src/renderer/src/AixPPTist/src/utils/image.ts
index 306ddbc..1336095 100644
--- a/src/renderer/src/AixPPTist/src/utils/image.ts
+++ b/src/renderer/src/AixPPTist/src/utils/image.ts
@@ -72,4 +72,55 @@ export const isSVGString = (text: string): boolean => {
 export const svg2File = (svg: string): File => {
   const blob = new Blob([svg], { type: 'image/svg+xml' })
   return new File([blob], `${Date.now()}.svg`, { type: 'image/svg+xml' })
+}
+
+/**
+ * 获取当前的时间
+ * @returns 
+ */
+export const getTime=()=>{
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = ('0' + (now.getMonth() + 1)).slice(-2);
+  const day = ('0' + now.getDate()).slice(-2);
+  const hours = ('0' + now.getHours()).slice(-2);
+  const minutes = ('0' + now.getMinutes()).slice(-2);
+  const seconds = ('0' + now.getSeconds()).slice(-2);
+  return `${year}-${month}-${day}_${hours}:${minutes}:${seconds}`;
+};
+
+/**
+* base64转图片File
+* @param {String} base64 图片base64
+* @param {String} fileName 图片名称| 默认 → myimg
+* @returns File 返回转换后的file数据类型
+*/
+export const base64ToFile = (base64: string, fileName = '试题图片') => {
+  // 将base64按照 , 进行分割 将前缀  与后续内容分隔开
+  let data = base64.split(','),
+  // 利用正则表达式 从前缀中获取图片的类型信息（image/png、image/jpeg、image/webp等）
+  type = data[0].match(/:(.*?);/)[1],
+  // 从图片的类型信息中 获取具体的文件格式后缀（png、jpeg、webp）
+  suffix = type.split('/')[1],
+  // 使用atob()对base64数据进行解码  结果是一个文件数据流 以字符串的格式输出
+  bstr = window.atob(data[1]),
+  // 获取解码结果字符串的长度
+  n = bstr.length,
+  // 根据解码结果字符串的长度创建一个等长的整形数字数组
+  // 但在创建时 所有元素初始值都为 0
+  u8arr = new Uint8Array(n)
+
+  // 将整形数组的每个元素填充为解码结果字符串对应位置字符的UTF-16 编码单元
+  while (n--) {
+      // charCodeAt()：获取给定索引处字符对应的 UTF-16 代码单元
+      u8arr[n] = bstr.charCodeAt(n)
+  }
+  const filename = fileName+getTime()
+  // 利用构造函数创建File文件对象
+  // new File(bits, name, options)
+  const file = new File([u8arr], `${filename}.${suffix}`, {
+      type: type
+  })
+  // 返回file
+  return file
 }
\ No newline at end of file
diff --git a/src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/index.vue b/src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/index.vue
index 896f6cf..909f7fe 100644
--- a/src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/index.vue
+++ b/src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/index.vue
@@ -141,7 +141,7 @@
 import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSnapshotStore } from '../../../store'
-import { getImageDataURL } from '../../../utils/image'
+import { getImageDataURL, base64ToFile } from '../../../utils/image'
 import type { ShapePoolItem } from '../../../configs/shapes'
 import type { LinePoolItem } from '../../../configs/lines'
 import useScaleCanvas from '../../../hooks/useScaleCanvas'
@@ -208,57 +208,9 @@ const insertImageElement = (files: FileList) => {
   // })
 }
 
-//获取当前的时间
-const getTime=()=>{
-  const now = new Date();
-  const year = now.getFullYear();
-  const month = ('0' + (now.getMonth() + 1)).slice(-2);
-  const day = ('0' + now.getDate()).slice(-2);
-  const hours = ('0' + now.getHours()).slice(-2);
-  const minutes = ('0' + now.getMinutes()).slice(-2);
-  const seconds = ('0' + now.getSeconds()).slice(-2);
-  return `${year}-${month}-${day}_${hours}:${minutes}:${seconds}`;
-};
-
-/**
-* base64转图片File
-* @param {String} base64 图片base64
-* @param {String} fileName 图片名称| 默认 → myimg
-* @returns File 返回转换后的file数据类型
-*/
-const base64ToFile = (base64: string, fileName = '试题图片') => {
-    // 将base64按照 , 进行分割 将前缀  与后续内容分隔开
-    let data = base64.split(','),
-    // 利用正则表达式 从前缀中获取图片的类型信息（image/png、image/jpeg、image/webp等）
-    type = data[0].match(/:(.*?);/)[1],
-    // 从图片的类型信息中 获取具体的文件格式后缀（png、jpeg、webp）
-    suffix = type.split('/')[1],
-    // 使用atob()对base64数据进行解码  结果是一个文件数据流 以字符串的格式输出
-    bstr = window.atob(data[1]),
-    // 获取解码结果字符串的长度
-    n = bstr.length,
-    // 根据解码结果字符串的长度创建一个等长的整形数字数组
-    // 但在创建时 所有元素初始值都为 0
-    u8arr = new Uint8Array(n)
-
-    // 将整形数组的每个元素填充为解码结果字符串对应位置字符的UTF-16 编码单元
-    while (n--) {
-        // charCodeAt()：获取给定索引处字符对应的 UTF-16 代码单元
-        u8arr[n] = bstr.charCodeAt(n)
-    }
-    const filename = fileName+getTime()
-    // 利用构造函数创建File文件对象
-    // new File(bits, name, options)
-    const file = new File([u8arr], `${filename}.${suffix}`, {
-        type: type
-    })
-    // 返回file
-    return file
-}
-
-
 const onhtml2canvas = async (html: HTMLElement) => {
   const base64Dta = await toPng(html);
+  // base64转图片File
   const toFile = base64ToFile(base64Dta) 
   // 上传图片转为线上地址
   PPTApi.toRousrceUrl(toFile).then(data=>{