🔥 允许 post 方式请求 fontmin 接口

.gitignore

@@ -35,4 +35,5 @@ lerna-debug.log*
 
 .cache
 dist
-asset
+asset/font
+asset/dynamically

README.md

@@ -41,7 +41,7 @@ ui 需要展现一些特定的字体，但直接引入字体包又过大，于
 }
 ```
 
-3.将 ttf 的字体包放置在 ./src/font/ 目录下自然可以检测到新的可用字体，无需重启服务
+3.将 ttf 的字体包放置在 ./asset/font_src/ 目录下自然可以检测到新的可用字体，无需重启服务
 
 ![路径预览](./doc_img/路径展示.jpg)
 
@@ -61,6 +61,11 @@ ui 需要展现一些特定的字体，但直接引入字体包又过大，于
 
 如图可见每个返回的字体资源，访问即可下载。另外在访问该目录下的 asset.zip 可以直接下载全部的文件,生成的资源目录结构见下图
 
+![fontmin](./doc_img/api/fontmin_post.jpg)
+
+注意，此接口是还支持 post 方式访问的，这样可以一次请求多个类型的字体文件，而且不会如同 get 方法那样有长度限制
+
+
 ![生成的资源.jpg](./doc_img/生成的资源.jpg)
 
 ### 动态生成字体
@@ -73,7 +78,9 @@ ui 需要展现一些特定的字体，但直接引入字体包又过大，于
 
 ## 写项目时遇到的问题
 
-使用 svelte https://github.com/DeMoorJasper/parcel-plugin-svelte 通过这个插件使用 parcel 然后报 new 的错 需要限制 编译的版本，在package.json browserslist 字段限制一下版本就好
+1. 使用 svelte https://github.com/DeMoorJasper/parcel-plugin-svelte 通过这个插件使用 parcel 然后报 new 的错 需要限制 编译的版本，在package.json browserslist 字段限制一下版本就好
+
+2. parcel 对 post purgecss 支持好像有问题，需要修改 postcss.config.js 文件他才能正确的删除样式
 
 ## 启动
 

postcss.config.js

@@ -9,7 +9,7 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
     './static/*.svelte',
     './static/*.js',
     './static/*.ts',
-    // etc.
+    `111 `
   ],
 
   // Include any special characters you're using in this regular expression

src/app.controller.ts

@@ -6,27 +6,53 @@ import {
   Response,
   Res,
   Req,
+  Post,
+  Body,
 } from '@nestjs/common';
 import { AppService } from './app.service';
 import { join } from 'path';
 import { promises as fs } from 'fs';
 import { Request } from 'express';
 import { Stream } from 'stream';
+import { req_par } from './req.decorator';
 @Controller()
 export class AppController {
   constructor(private readonly appService: AppService) {}
 
   /** 压缩字体 */
   @Get('fontmin')
-  font_min(@Query('text') text, @Query('font') font) {
-    return this.appService.font_min(text, font);
+  font_min(@Query('text') text, @Query('font') font,@req_par('host_url') host_url:string) {
+
+    return this.appService.font_min(text, font,host_url);
+  }
+  @Post('fontmin')
+  font_min_post(@Body() body: { text: string; font: string }[],@req_par('host_url') host_url:string) {
+    const res = body.map(par => {
+      return new Promise((resolve, reject) => {
+        this.appService
+          .font_min(par.text, par.font,host_url)
+          .then(r => {
+            resolve({
+              font: par.font,
+              css:r,
+              status: 'success',
+            });
+          })
+          .catch(e => {
+            resolve({
+              font: par.font,
+              status: 'failure',
+            });
+          });
+      });
+    });
+    return Promise.all(res);
   }
 
   /** 返回字体列表 */
   @Get('font_list')
   font_list() {
-    const font_dir = join(__dirname, '../../src/font');
-    return fs.readdir(font_dir);
+    return this.appService.font_list();
   }
 
   /** 压缩字体 */
@@ -42,8 +68,7 @@ export class AppController {
     res.set({
       'Content-Type': `font/${type}`,
     });
-    if(!text)
-      return ' '
+    if (!text) return ' ';
     const file = await this.appService.generate_fonts_dynamically(
       text,
       font,
@@ -56,3 +81,5 @@ export class AppController {
     bufferStream.pipe(res);
   }
 }
+
+function promise_execute_all<T>(params: Promise<T>[]) {}

src/app.service.ts

@@ -5,10 +5,18 @@ import { join } from 'path';
 import crypto from 'crypto';
 import { config } from './config';
 import { promises as fs } from 'fs';
+import { req_par } from './req.decorator';
+
+const font_src="./asset/font_src/"
+
 @Injectable()
 export class AppService {
-  font_min(text: string, font: string) {
-    const srcPath = `./src/font/${font}.ttf`; // 字体源文件
+  font_list() {
+    const font_dir = join(__dirname, `../../${font_src}`);
+    return fs.readdir(font_dir);
+  }
+  font_min(text: string, font: string,server_url:string) {
+    const srcPath = `${font_src}${font}.ttf`; // 字体源文件
     const outPath = `asset/font/${Date.now()}/`;
     const destPath = `./${outPath}`; // 输出路径
     // 初始化
@@ -22,7 +30,7 @@ export class AppService {
       .use(Fontmin.ttf2eot()) // eot 转换插件
       .use(Fontmin.ttf2woff()) // woff 转换插件
       .use(Fontmin.ttf2svg()) // svg 转换插件
-      .use(Fontmin.css({ fontPath: `${config.web_font_path}${outPath}` })) // css 生成插件
+      .use(Fontmin.css({ fontPath: `${server_url}${outPath}` })) // css 生成插件
       .dest(destPath); // 输出配置
 
     // 执行
@@ -36,7 +44,7 @@ export class AppService {
             .filter(f =>
               (f.history[f.history.length - 1] as string).endsWith('.css'),
             )
-            .map(f => f._contents.toString());
+            .map(f => f._contents.toString())[0];
           zip(
             join(__dirname, '../../', destPath),
             join(__dirname, '../../', destPath, 'asset.zip'),
@@ -58,7 +66,7 @@ export class AppService {
     const hash = crypto.createHash('md5');
     hash.update(`${type}${font}${text}`);
     const hash_str = hash.digest('hex');
-    const srcPath = `./src/font/${font}.ttf`; // 字体源文件
+    const srcPath = `${font_src}${font}.ttf`; // 字体源文件
     const outPath = `asset/dynamically/${hash_str}`;
     const destPath = `./${outPath}`; // 输出路径
 
@@ -128,4 +136,4 @@ export class AppService {
       });
     });
   }
-}
+}

src/req.decorator.ts

@@ -0,0 +1,9 @@
+import { createParamDecorator } from '@nestjs/common';
+import { Request } from 'express';
+
+export const req_par = createParamDecorator((data: string, req:Request) => {
+    if('host_url'===data){
+        return `//${req.headers.host}/`
+    }
+    return req
+});

static/App.svelte

@@ -1,19 +1,21 @@
 <script>
   import { writable } from 'svelte/store';
-  import { get_font, get_font_list,server } from './req';
+  import { get_font, get_font_list,server,post_fontmin } from './req';
   /** 可用的字体列表  {id:number,name:string:selected:undefined | boolen,css:undefined|string}*/
   $: font_list = [];
   get_font_list().then(r => {
     font_list = r.map(ttf => ({ name: ttf.replace(/\.ttf$/, '') }));
   });
   /** 选择的文字 */
-  let text = '';
+  let text = '在此输入需要提取的文字\n在右侧选择字体\n然后点击下方的生成字体按钮';
+  /** 请求方式 */
+  let request_method="post"
   /** 用于测试动态生成接口 */
   let generate_fonts_dynamically=`<style>
       @font-face {
               font-family: "test";
               src:
-                  url("${location.pathname}generate_fonts_dynamically.ttf?temp=true&font=优设标题黑&text=优设标题黑(直接改这里和前面的字体名看效果)") format("truetype");
+                  url("${server}generate_fonts_dynamically.ttf?temp=true&font=优设标题黑&text=优设标题黑(直接改这里和前面的字体名看效果)") format("truetype");
               font-style: normal;
               font-weight: normal;
           }
@@ -21,22 +23,39 @@
 </style>`
   $: selected_font = font_list.filter(font => font.selected);
   function generate_font() {
-    selected_font.forEach(font => {
-      get_font(font.name, text)
-        .then(r => {
-          r=r.replace(/\/\/.*?\//g,server)
-
-          const family = r.match(/font-family: "(.*)"/)[1];
-          font.css = r;
-          font.family = family;
-          font.zip=server+r.match(/(asset\/font\/\d+\/)/)[0]+'asset.zip'
-          /** 因为要触发其他更新则必须对这个变量重新赋值 */
-          font_list = font_list;
+    if('post'===request_method){
+      /** 使用 post 请求，单请求方式 */
+      post_fontmin(
+        selected_font.map(f=>({
+          font:f.name, text
+        }))
+      ).then(res=>{
+        selected_font.forEach(font=>{
+          let r=res.find(o=>o.font===font.name).css
+          font_processing(font,r)
         })
-        .catch(e => {
-          console.log(e);
-        });
-    });
+      })
+    }
+    if('get'===request_method){
+      /** 使用 get 请求，多请求方式 */
+      selected_font.forEach(font => {
+        get_font(font.name, text)
+          .then(r => {
+            font_processing(font,r)
+          })
+      });
+    }
+
+    function font_processing(font,r) {
+      r=r.replace(/\/\/.*?\//g,server)
+
+      const family = r.match(/font-family: "(.*)"/)[1];
+      font.css = r;
+      font.family =  family;
+      font.zip=server+r.match(/(asset\/font\/\d+\/)/)[0]+'asset.zip'
+      /** 因为要触发其他更新则必须对这个变量重新赋值 */
+      font_list = font_list;
+    }
   }
   function copy(str) {
     var input = document.getElementById("copy_box");
@@ -57,7 +76,7 @@
   <textarea
     bind:value={text}
     class="border flex-1 m-1"
-    placeholder="在此输入需要提取的文字"
+    placeholder="在此输入需要提取的文字 在右侧选择字体 然后点击下方的生成字体按钮"
     cols="40"
     rows="3" />
   <div class="flex-1 m-1 flex flex-wrap">
@@ -73,9 +92,25 @@
 </div>
 
 <div class="flex">
-  <div on:click={generate_font}  class="bg-red-200 text-red-600 rounded-md px-1 hover:bg-red-400 hover:text-white duration-75">
+  <div on:click={generate_font}  class="bg-red-200 text-red-600 rounded-md px-2 hover:bg-red-400 hover:text-white duration-75 flex items-center shadow-md">
     生成字体
   </div>
+
+  <div class="flex border ml-2 items-end">
+    <div
+      on:click={e => request_method="post"}
+      class="c-label {request_method==="post" ? 'c-label-selected' : ''}">
+      使用 post 请求
+    </div>
+    <div
+      on:click={e => request_method="get"}
+      class="c-label {request_method==="get" ? 'c-label-selected' : ''}">
+      使用 get 请求
+    </div>
+    <div class="text-sm">* 具体区别请打开控制台查看请求</div>
+  </div>
+
+
 </div>
 
 {#each selected_font as font, i}
@@ -94,7 +129,7 @@
 
 
 <h2 class="text-lg text-center my-3  font-bold"> 动态生成字体（generate_fonts_dynamically 接口）</h2>
-<p>使用如下的方式引入，则可以直接使用</p>
+<p class="ml-1">使用如下的方式引入，则可以直接使用</p>
 <textarea
   bind:value={generate_fonts_dynamically}
   class="border flex-1 m-1 w-full text-lg"

static/req.ts

@@ -1,10 +1,11 @@
-export const server='//'+location.host+location.pathname
-export function get_font(font:string, text:string) {
+export const server = '//' + location.host + location.pathname;
+/** get 方式压缩字体 */
+export function get_font(font: string, text: string) {
   return new Promise((rs, re) => {
     var xhr = new XMLHttpRequest();
     xhr.addEventListener('readystatechange', function() {
       if (this.readyState === 4) {
-        rs(JSON.parse(this.responseText)[0]);
+        rs(this.responseText);
       }
     });
     xhr.open(
@@ -13,11 +14,27 @@ export function get_font(font:string, text:string) {
         font,
       )}&text=${encodeURIComponent(text)}`,
     );
-    xhr.onerror=re
+    xhr.onerror = re;
     xhr.send();
-  })
+  });
 }
-export function get_font_list(font:string, text:string) {
+/** post 方式压缩字体 */
+export function post_fontmin(par:{font:string,text:string}[]) {
+  return new Promise((rs, re) => {
+    var data = JSON.stringify(par);
+    var xhr = new XMLHttpRequest();
+    xhr.addEventListener('readystatechange', function() {
+      if (this.readyState === 4) {
+        rs(JSON.parse(this.responseText) );
+      }
+    });
+    xhr.open('POST', `${server}fontmin`);
+    xhr.setRequestHeader('Content-Type', 'application/json');
+    xhr.onerror = re;
+    xhr.send(data);
+  });
+}
+export function get_font_list(font: string, text: string) {
   return new Promise((rs, re) => {
     var xhr = new XMLHttpRequest();
     xhr.addEventListener('readystatechange', function() {
@@ -25,11 +42,8 @@ export function get_font_list(font:string, text:string) {
         rs(JSON.parse(this.responseText));
       }
     });
-    xhr.open(
-      'GET',
-      `${server}font_list`,
-    );
-    xhr.onerror=re
+    xhr.open('GET', `${server}font_list`);
+    xhr.onerror = re;
     xhr.send();
-  })
+  });
 }