新增对字体的优化，自动生成字体文件

package.json

@@ -14,6 +14,7 @@
     "@element-plus/icons-vue": "^2.1.0",
     "@icon-park/vue-next": "^1.4.2",
     "@types/ali-oss": "^6.16.11",
+    "@types/opentype.js": "^1.3.8",
     "@types/psd": "^3.4.3",
     "@vueuse/integrations": "^10.7.2",
     "ali-oss": "^6.18.1",
@@ -34,6 +35,7 @@
     "mitt": "^3.0.1",
     "nanoid": "^4.0.2",
     "number-precision": "^1.6.0",
+    "opentype.js": "^1.3.4",
     "pinia": "^2.1.7",
     "pptxgenjs": "^3.12.0",
     "pptxtojson": "^0.0.13",

src/components/PSD/Index.vue

@@ -84,6 +84,7 @@ import { useFontStore,useScreenStore } from '@/store'
 import { CustomerFonts } from '@/store/font'
 import { injectKeyDataSource,injectKeyTemplate } from '@/types/injectKey'
 import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
+import { reduceFont } from '@/utils/fonts/convertFont'
 
 const props = defineProps({
     visible:{
@@ -156,12 +157,25 @@ const uploadFontHandler = async (uploadFile:any, uploadFiles:any, fontName:strin
     try {
         const url = await AliyunUpload.UploadAsync(uploadFile?.raw,"tripfont/"+uploadFile.name)
         if(url && url!=''){
+            let label=uploadFile.name.split('.')[0],reduceName='',reduceUrl=''
+            try {
+                let info = await reduceFont(uploadFile?.raw)
+                if(info.file){
+                    label = info.name
+                    reduceName = `${fontName}_reduce`
+                    reduceUrl = await AliyunUpload.UploadAsync(info.file,"tripfont/"+info.file.name)
+                }
+            } catch (error) { 
+                console.log('发生异常',error)
+            }
             //添加字体
             //uploadFinishFont.value.push(fontName)
             let data:CustomerFonts = {
                 fontFamily:fontName,
-                label:uploadFile.name.split('.')[0],
-                fontUrl:url
+                label,
+                fontUrl:url,
+                reduceName,
+                reduceUrl
             }
             const result = await useFontStore().uploadFontAsync(data)
             if(result){

src/services/FileService.ts

@@ -94,6 +94,14 @@ class FileService {
       image.src = objectURL;
     })
   }
+
+  static downloadFileStreamAsync = async (url:string) => {
+    const response = await fetch(url)
+    const blob = await response.blob()
+    let fileName = url.substring(url.lastIndexOf('/')+1,url.length)
+    let file = new File([blob],fileName)
+    return file
+  }
 }
 
 export default FileService
\ No newline at end of file

src/store/font.ts

@@ -2,16 +2,22 @@ import { ApiResult } from './../configs/axios';
 import { defineStore } from 'pinia'
 import FontService from '@/services/FontService'
 import { ElLoading } from 'element-plus'
+import FileService from '@/services/FileService';
+import { reduceFont } from '@/utils/fonts/convertFont';
+import AliyunUpload from '@/utils/upload/aliyun';
 
 export interface CustomerFonts {
     fontUrl: string
     fontFamily: string
     label: string
+    reduceName:string
+    reduceUrl:string
 }
 
 export interface FormatFonts {
     label: string,
-    value: string
+    value: string,
+    reduce: string
 }
 
 export interface FontState{
@@ -39,14 +45,37 @@ export const useFontStore = defineStore('fonts',{
                     this.fonts = response.data.data as CustomerFonts[]
                     this.formatFonts = []
                     this.fonts.forEach(x=>{
-                        this.formatFonts.push({ label: x.label,value:x.fontFamily })
+                        this.formatFonts.push({ label: x.label,value:x.fontFamily,reduce:x.reduceName })
                     })
+
+                    setTimeout(() => {
+                        this.loadAllReduceFont()
+                    }, 1000);
                 }
 
             } catch (error) {
                 console.log('初始化字体信息失败')
             }
         },
+        async loadAllReduceFont(index:number=-1){
+            for (let i = 0; i < this.fonts.length; i++) {
+                if(index!=-1 && index!=i) continue
+                const f = this.fonts[i];
+                if(f.reduceUrl && f.reduceUrl!=''){
+                    let newStyle = document.createElement('style');
+                    const fontFormat = 'opentype'
+                    newStyle.setAttribute("type", "text/css");
+                    newStyle.appendChild(document.createTextNode("\
+                        @font-face {\
+                            font-family: '" + f.reduceName + "';\
+                            src: url('"+f.reduceUrl+"') format('"+fontFormat+"');\
+                        }\
+                    "));
+                    document.head.appendChild(newStyle);
+                }
+                
+            }
+        },
         async loadFontToDocument(items:string[]){
             const loadingInstance = ElLoading.service({
                 lock:true,
@@ -96,8 +125,10 @@ export const useFontStore = defineStore('fonts',{
                     this.fonts.push(item)
                     this.formatFonts.push({
                         label:item.label,
-                        value:item.fontFamily
+                        value:item.fontFamily,
+                        reduce:item.reduceName
                     })
+                    this.loadAllReduceFont(this.fonts.length-1)
                     return true
                 }
             } catch (error) {

src/utils/fonts/convertFont.ts

+import * as opentype from 'opentype.js'
+
+const hex = (buffer:ArrayBuffer)=>{
+  let code = [];
+  let view = new DataView(buffer);
+  for (var i = 0; i < view.byteLength; i += 4) {
+      let value = view.getUint32(i)
+      let stringValue = value.toString(16)
+      // 填充切片
+      let padding = '00000000'
+      let paddedValue = (padding + stringValue).slice(-padding.length)
+      code.push(paddedValue);
+  }
+  return code.join("");
+}
+
+const randomString = (e:number) => {    
+  e = e || 32;
+  var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
+  a = t.length,
+  n = "";
+  for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
+  return n+(new Date().getTime())
+}
+
+export const reduceFont = async (fontFile: File) => {
+  const buff = await fontFile.arrayBuffer()
+  console.log(buff)
+  let fontb = opentype.parse(buff)
+  let saveWords = fontb.names.fontFamily.zh??fontb.names.fontFamily.en
+  saveWords ="A"+saveWords
+  let savePosition:any[] = []
+  for (let i = 0; i < saveWords.length; i++) {
+    let g=fontb.encoding.charToGlyphIndex(saveWords[i]);
+    console.log(g)
+    if (g>=0){
+      savePosition.push(fontb.glyphs.get(g))
+    }
+  }
+  const glyphs = savePosition;
+  const font = new opentype.Font({
+    familyName: 'newFont',
+    styleName: 'regular',
+    unitsPerEm: fontb.unitsPerEm,
+    ascender: fontb.ascender,
+    descender: fontb.descender,
+    glyphs: glyphs
+  });
+  let newBuff = font.toBuffer();
+  let fileName = randomString(6)+".otf"
+  let newFile = new File([newBuff],fileName)
+  return {
+    file:newFile,
+    name:fontb.names.fontFamily.zh??fontb.names.fontFamily.en
+  }
+  //font.download();
+}
\ No newline at end of file

src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue

@@ -29,6 +29,7 @@
             :key="item.value"
             :label="item.label"
             :value="item.value"
+            :style="{'font-family':item.reduce!=''?item.reduce:item.label}"
         />
       </el-select>
       <!-- <Select

src/views/Editor/Toolbar/SlideDesignPanel.vue

@@ -147,6 +147,7 @@
             :key="item.value"
             :label="item.label"
             :value="item.value"
+            :style="{'font-family':item.reduce!=''?item.reduce:item.label}"
         />
       </el-select>
       <!-- <Select