From 4333c714be19c42981fcf2adab646496d70af53f Mon Sep 17 00:00:00 2001 From: ShawnPhang Date: Fri, 21 Jul 2023 13:13:04 +0800 Subject: [PATCH] code: remove gaoding api --- README.md | 17 +++++++ src/api/gaoding.ts | 47 ------------------- src/api/index.ts | 6 +-- src/api/material.ts | 3 +- src/common/methods/fonts/index.ts | 6 +-- .../modules/widgets/wText/wText.vue | 35 ++------------ src/config.ts | 12 +---- src/views/Draw.vue | 16 +++---- 8 files changed, 36 insertions(+), 106 deletions(-) delete mode 100644 src/api/gaoding.ts diff --git a/README.md b/README.md index 00a7bd8..83e0493 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,8 @@ cd poster-design npm run prepared ``` +> 网络太慢？尝试运行：npm config set registry https://registry.npmmirror.com 再安装依赖 + ### 本地运行 ``` @@ -51,6 +53,7 @@ npm run serve > 将会同时运行前端界面与图片生成服务： > > ![](https://xp.palxp.com/images/2023-7-16-1689498291322.png) +> 如果你本地没有成功启动两个服务，可能是 win 系统不兼容，手动进 `screenshot` 目录安装依赖并启动服务，或是使用 VSCode 自带的终端来运行命令，不要使用 CMD。 合成图片时本地会启动一个 Chrome 浏览器实例。 @@ -69,6 +72,10 @@ npm run build <- 图片生成服务（ sreenshot 目录下） 代码位于 `screenshots` 目录下，查看[接口 API 文档](https://xp.palxp.com/apidoc/screenshot.html)。 +目录结构比较简单，主要就实现了三个接口，其中 api/screenshots 即是项目中所使用到的图片生成接口，在真实生产项目中可以把该服务单独部署，于内网调用，这样利于做一些鉴权之类的处理。 + +另外 api/printscreen 这个接口实现的是网页截图的 API，该接口可以传入一个 URL 对整个网页进行截图，本项目中不依赖此接口。 + ### 服务器配置 在 Linux 环境下，npm 自动安装的 Chrome 浏览器有可能会出错，所以推荐从外部安装好浏览器，再给项目中的配置文件 `config.js` 设置好路径，例如： @@ -134,3 +141,13 @@ A：抱歉，本人时间精力有限，无法提供私有化部署或二次开 Q：**服务端源码不开源吗？** A：考虑到服务端的开发语言、数据库类型都可能不尽相同，且分离代码出来有一定成本，所以暂时不考虑直接开源，只提供接口 API 文档供参考。目前服务端仅是一些简单的增删改查，自行实现的技术难度并不高。 + +### 其它 + +项目最早使用 Vue2 开发，后改用 Vue3 重构，所以有部分代码混合了 Options 写法。 + +如果你也对开发图片编辑器感兴趣，欢迎一起共建项目！ + +或许你在工作中有这类需求，如果能给到你一些微薄的帮助，那就更好不过了！ + +目前本项目也还在不断迭代中，有很多的不足之处，我也是一边学习一边成长。开源不易，希望看到这里的你可以给本项目点个 Star 支持一下~ 感谢！ diff --git a/src/api/gaoding.ts b/src/api/gaoding.ts deleted file mode 100644 index 4cc40f1..0000000 --- a/src/api/gaoding.ts +++ /dev/null @@ -1,47 +0,0 @@ -/* - * @Author: ShawnPhang - * @Date: 2022-01-22 10:22:53 - * @Description: 稿定接口 - * @LastEditors: ShawnPhang - * @LastEditTime: 2023-06-27 10:38:51 - */ -import httpRequest from '@/utils/http-request' - -export const CORS = 'https://juejin.palxp.com/cors?url=' -export const GAODING_API_V2 = 'https://www.gaoding.com/api/v2' -export const GAODING_FONTER = 'https://fonter.dancf.com' - -export const getFonts = async (pageNum: number): Promise => { - return await httpRequest.get(`${CORS}${GAODING_API_V2}/fonts`, { - params: { - type: 'font', - page_size: 100, - page_num: pageNum, - region_id: 1, - biz_code: 1, - endpoint: 4, - }, - }) -} - -export const searchFonts = async (name: string): Promise => { - const url = `${CORS}https://www.gaoding.com/api/v2/font-fallbacks?font_name=${name}` - return await httpRequest.get(url, {}) -} - -interface GetSubsetFontParams { - font_id: number - content: string - url: string -} - -export async function getSubsetFont(params: GetSubsetFontParams) { - return await httpRequest.get(`${GAODING_FONTER}/subset`, { - params: { - from_site: 'gaoding', - type: 'woff', - ...params, - }, - responseType: 'blob', - }) -} diff --git a/src/api/index.ts b/src/api/index.ts index 17173da..c27f723 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -2,15 +2,13 @@ * @Author: ShawnPhang * @Date: 2021-08-19 18:43:22 * @Description: - * @LastEditors: ShawnPhang - * @LastEditTime: 2022-01-22 18:22:13 + * @LastEditors: ShawnPhang + * @LastEditTime: 2023-07-21 13:06:46 */ import * as home from './home' import * as material from './material' -import * as gaoding from './gaoding' export default { home, material, - gaoding, } diff --git a/src/api/material.ts b/src/api/material.ts index dfd5ce7..652e466 100644 --- a/src/api/material.ts +++ b/src/api/material.ts @@ -3,7 +3,7 @@ * @Date: 2021-08-27 14:42:15 * @Description: * @LastEditors: ShawnPhang - * @LastEditTime: 2023-07-12 09:50:00 + * @LastEditTime: 2023-07-21 11:19:04 */ import fetch from '@/utils/axios' @@ -15,6 +15,7 @@ export const getList = (params: Type.Object = {}) => fetch('design/material', pa // 获取字体 export const getFonts = (params: Type.Object = {}) => fetch('design/fonts', params) +export const getFontSub = (params: Type.Object = {}) => fetch('design/font_sub', params) // 图库列表 export const getImagesList = (params: Type.Object = {}) => fetch('design/imgs', params, 'get') diff --git a/src/common/methods/fonts/index.ts b/src/common/methods/fonts/index.ts index 1436e84..59a28af 100644 --- a/src/common/methods/fonts/index.ts +++ b/src/common/methods/fonts/index.ts @@ -2,11 +2,9 @@ * @Author: ShawnPhang * @Date: 2022-01-08 09:43:37 * @Description: 字体处理 - * @LastEditors: ShawnPhang - * @LastEditTime: 2022-03-30 14:13:26 + * @LastEditors: ShawnPhang + * @LastEditTime: 2023-07-21 13:07:08 */ - -// import { getFonts } from '@/api/gaoding' // import { isSupportFontFamily, blob2Base64 } from './utils' import { getFonts } from '@/api/material' // import store from '@/store' diff --git a/src/components/modules/widgets/wText/wText.vue b/src/components/modules/widgets/wText/wText.vue index 322d38b..17842ea 100644 --- a/src/components/modules/widgets/wText/wText.vue +++ b/src/components/modules/widgets/wText/wText.vue @@ -70,10 +70,10 @@ export default { fontSize: 24, zoom: 1, fontClass: { - alias: '阿里巴巴普惠体 特粗', - id: 206825, - value: 'AlibabaPuHuiTi-Heavy', - url: 'https://gd-filems.dancf.com/gaoding/editor/20221222-201834-fjfkh.woff', + alias: '思源黑体 常规', + id: 206607, + value: 'SourceHanSansSC-Regular', + url: 'https://font.palxp.com/SourceHanSansSC-Regular.woff', }, fontFamily: 'SourceHanSansSC-Regular', fontWeight: 'normal', @@ -118,33 +118,6 @@ export default { let font = nval.fontClass const isDone = font.value === this.loadFontDone - // let localFonts = localStorage.getItem('FONTS') ? JSON.parse(localStorage.getItem('FONTS') || '') : [] - // let gdFont = localFonts.find((font) => font.alias === '思源黑体 常规') - // console.log(111, gdFont) - - // if (!font.url && nval.fontFamily) { - // this.loading = true - // let localFonts = localStorage.getItem('FONTS') ? JSON.parse(localStorage.getItem('FONTS') || '') : [] - // let gdFont = localFonts.find((font) => font.name === nval.fontFamily) - // if (!gdFont) { - // const searchFallback = await api.gaoding.searchFonts(nval.fontFamily) - // for (let i = 0; i < searchFallback.length; i++) { - // const { dest } = searchFallback[i] - // gdFont = localFonts.find((font) => font.name === dest) - // if (gdFont) { - // break - // } - // } - // } - // if (gdFont) { - // font.id = gdFont.id - // font.value = gdFont.name - // font.url = gdFont.url - // font.alias = gdFont.alias - // } - // delete nval.fontFamily - // } - if (font.url && !isDone) { if (font.id && this.isDraw) { this.loading = false diff --git a/src/config.ts b/src/config.ts index 4033f23..16e8c02 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,11 +1,3 @@ -/* - * @Author: ShawnPhang - * @LastEditors: ShawnPhang - * @Description: Setting - * @Date: 2021-07-13 02:48:38 - * @LastEditTime: 2023-07-14 01:03:01 - */ - // const prefix = import.meta.env const prefix = process.env @@ -17,8 +9,8 @@ export default { VERSION: '1.1.0', APP_NAME: '迅排设计', COPYRIGHT: 'ShawnPhang - Palxp.com', - // API_URL: isDev ? 'http://localhost:9998' : '${API}', - API_URL: 'https://app.palxp.com:8887', + API_URL: isDev ? 'http://localhost:9998' : '${API}', + // API_URL: 'https://app.palxp.com:8887', SCREEN_URL: isDev ? 'http://localhost:7001' : '${SCREEN_URL}', IMG_URL: 'https://store.palxp.com/', // ICONFONT_URL: '//at.alicdn.com/t/font_3223711_74mlzj4jdue.css', diff --git a/src/views/Draw.vue b/src/views/Draw.vue index bd23383..d8f6307 100644 --- a/src/views/Draw.vue +++ b/src/views/Draw.vue @@ -93,24 +93,24 @@ export default defineComponent({ item.url = list.find((x: any) => x.oid == item.id).ttf }) await this.font2style(fontContent, fontData) - console.log('1. base64 yes') + // console.log('1. base64 yes') const preload = new Preload(imgsData) await preload.doms() - console.log('2. image yes') + // console.log('2. image yes') const preload2 = new Preload(svgsData) await preload2.svgs() - console.log('3. svg yes') + // console.log('3. svg yes') } catch (e) { console.log(e) } try { await Promise.all(fontLoaders) - console.log('4. font yes') + // console.log('4. font yes') } catch (e) { // console.log(e) } loadFlag = true - console.log('--> now u can start screenshot!') + // console.log('--> now u can start screenshot!') setTimeout(() => { try { ;(window as any).loadFinishToInject('done') @@ -125,19 +125,17 @@ export default defineComponent({ async font2style(fontContent: any, fontData: any = []) { return new Promise((resolve: Function) => { Promise.all( - // TODO: 临时。拿到所有文字所对应字体子集 base64 + // 拿到字体子集，只有ttf这种原始字体支持提取，如没有则只能加载整个字体文件 Object.keys(fontContent).map(async (key) => { const font = fontData.find((font: any) => font.value === key) as any if (font.id) { try { - const blob = await api.gaoding.getSubsetFont({ + const base64 = await api.material.getFontSub({ font_id: font.id, url: font.url, content: 'Aa' + fontContent[key], }) - const base64 = await blob2Base64(blob as unknown as Blob) fontContent[key] = base64 - console.log('获取稿定字体: ' + font.id) } catch (e) { console.log('字体获取失败', e) }