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 879865f..18ac469 100644 --- a/src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/index.vue +++ b/src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/index.vue @@ -114,7 +114,7 @@ /> - + { // }) } +/** +* 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) + } + // 利用构造函数创建File文件对象 + // new File(bits, name, options) + const file = new File([u8arr], `${fileName}.${suffix}`, { + type: type + }) + // 返回file + return file +} + + const onhtml2canvas = async (html: HTMLElement) => { - const ele = await toPng(html); - createImageElement(ele); + const base64Dta = await toPng(html); + const toFile = base64ToFile(base64Dta) + // 上传图片转为线上地址 + PPTApi.toRousrceUrl(toFile).then(data=>{ + createImageElement(data) + }) + // createImageElement(ele); } const shapePoolVisible = ref(false)