Compare commits

..

3 Commits

Author SHA1 Message Date
baigl c3b975fee9 Merge pull request 'baigl' (#126) from baigl into main
Reviewed-on: #126
2024-12-12 16:45:29 +08:00
白了个白 ea2a8ebfda Merge branch 'main' of http://27.128.240.72:3000/zhuhao/AIx_Smarttalk_WS into baigl 2024-12-12 16:44:36 +08:00
白了个白 308465adb4 ppts: 64转file 提取到utils image中 2024-12-12 16:44:03 +08:00
2 changed files with 53 additions and 50 deletions

View File

@ -73,3 +73,54 @@ export const svg2File = (svg: string): File => {
const blob = new Blob([svg], { type: 'image/svg+xml' }) const blob = new Blob([svg], { type: 'image/svg+xml' })
return new File([blob], `${Date.now()}.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
}

View File

@ -141,7 +141,7 @@
import { ref } from 'vue' import { ref } from 'vue'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { useMainStore, useSnapshotStore } from '../../../store' import { useMainStore, useSnapshotStore } from '../../../store'
import { getImageDataURL } from '../../../utils/image' import { getImageDataURL, base64ToFile } from '../../../utils/image'
import type { ShapePoolItem } from '../../../configs/shapes' import type { ShapePoolItem } from '../../../configs/shapes'
import type { LinePoolItem } from '../../../configs/lines' import type { LinePoolItem } from '../../../configs/lines'
import useScaleCanvas from '../../../hooks/useScaleCanvas' 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/pngimage/jpegimage/webp
type = data[0].match(/:(.*?);/)[1],
// pngjpegwebp
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 onhtml2canvas = async (html: HTMLElement) => {
const base64Dta = await toPng(html); const base64Dta = await toPng(html);
// base64File
const toFile = base64ToFile(base64Dta) const toFile = base64ToFile(base64Dta)
// 线 // 线
PPTApi.toRousrceUrl(toFile).then(data=>{ PPTApi.toRousrceUrl(toFile).then(data=>{