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=>{