diff --git a/README.md b/README.md index afe18a1..f4d4316 100644 --- a/README.md +++ b/README.md @@ -12,13 +12,13 @@ - 丝滑的操作体验,丰富的交互细节,基础功能完善 - 采用服务端生成图片,确保多端出图统一性,支持各种 CSS 特性 -- 支持将上传的 PSD 文件解析成模板,方便导入已有设计图 +- 简易 AI 抠图工具,上传图片一键去除背景 - 技术栈:Vue3 、Vite2 、Vuex 、ElementPlus - 图片生成:Puppeteer、Express ### 支持功能 -- 导入 PSD 设计稿,导出图片下载 +- 导入 PSD 文件解析成模板、在线导出图片下载 - 元素拖拽、组合、缩放、层级调整、对齐等操作。 - 图片素材插入、替换、裁剪,图片容器等功能。 - SVG 素材颜色、透明度编辑,文字花字组合。 @@ -62,24 +62,30 @@ npm run serve ### 打包 -| 前端页面 | 图片生成服务 | +| 前端页面 | 截图服务 | | ----------------- | ------------------------------------- | | `npm run v-build` | `cd sreenshot`
`npm run build` | -### 后端 - -根据你的具体场景自行实现,目前本项目中的所有服务端接口可参考:[接口 API 文档](https://xp.palxp.com/apidoc/index.html)。 - -### 图片生成服务 +### 截图服务 代码位于 [screenshots/](https://github.com/palxiao/poster-design/tree/main/screenshot) 目录下,查看[接口 API 文档](https://xp.palxp.com/apidoc/screenshot.html)。 > 打包注意事项与服务器配置相关请进入该目录下查看 README 文件说明。 -### Docker 容器部署 +### 截图服务 Docker 部署 可以通过 Docker 运行一个带 Linux 浏览器的容器,[参考说明](https://xp.palxp.com/#/articles/1689319644311?id=docker%e5%ae%b9%e5%99%a8)。 +### 服务端 + +根据你的具体场景自行实现,目前本项目中的所有后端接口可参考:[接口 API 文档](https://xp.palxp.com/apidoc/index.html)。 + +### 抠图服务部署 + +``` +docker run -d -p 5000:5000 --restart always danielgatis/rembg s +``` + ### 感谢 本项目使用或参考了一些优秀开源项目,包括但不限于: @@ -104,7 +110,7 @@ A:考虑到服务端的开发语言、数据库类型都可能不尽相同, 项目最早使用 Vue2 开发,后改用 Vue3 重构,所以有部分代码混合了 Options 写法。 -或许你在工作中有这类需求,这个项目能给到你一些微薄帮助的话,那就再好不过了! +或许你在工作中有类似的研发需求,或者对开发编辑器感兴趣,希望这个项目能给到你一些微薄帮助! 目前本项目也还在不断迭代中,有很多的不足之处,我也是一边学习一边成长。开源不易,希望看到这里的你可以给本项目点个 **Star** 支持一下~ 感谢! diff --git a/src/api/github.ts b/src/api/github.ts index 5123aeb..4e19e71 100644 --- a/src/api/github.ts +++ b/src/api/github.ts @@ -3,13 +3,12 @@ * @Date: 2023-07-13 17:01:37 * @Description: github api * @LastEditors: ShawnPhang - * @LastEditTime: 2023-07-14 00:01:05 + * @LastEditTime: 2023-08-10 10:33:59 */ import fetch from '@/utils/axios' -const reader = new FileReader() -const knock = 'qpV8PUxwY7as4jc' -const cut = 'AqYfNFb6G2f2OVl4IVFOY' +const cutToken = 'ghp_qpV8PUxwY7as4jc' +const reader = new FileReader() function getBase64(file: File) { return new Promise((resolve) => { reader.onload = function (event: any) { @@ -21,22 +20,17 @@ function getBase64(file: File) { } const putPic = async (file: any) => { - const content = typeof file === 'string' ? file : await getBase64(file) const repo = 'shawnphang/files' const d = new Date() + const content = typeof file === 'string' ? file : await getBase64(file) const path = `${d.getFullYear()}/${d.getMonth()}/${d.getTime()}${file.name?.split('.').pop() || '.png'}` const imageUrl = 'https://api.github.com/repos/' + repo + '/contents/' + path - const body = { - branch: 'main', - message: 'upload', - content, - path, - } - await fetch(imageUrl, body, 'put', { - Authorization: 'token ' + 'ghp_' + knock + cut, + const body = { branch: 'main', message: 'upload', content, path } + const res = await fetch(imageUrl, body, 'put', { + Authorization: `token ${cutToken}AqYfNFb6G2f2OVl4IVFOY`, 'Content-Type': 'application/json; charset=utf-8', }) - return `https://fastly.jsdelivr.net/gh/shawnphang/files@main/${path}` + return res?.content?.download_url || `https://fastly.jsdelivr.net/gh/shawnphang/files@main/${path}` } export default { putPic } diff --git a/src/components/modules/panel/widgetPanel.vue b/src/components/modules/panel/widgetPanel.vue index bc5ee38..a78b77a 100644 --- a/src/components/modules/panel/widgetPanel.vue +++ b/src/components/modules/panel/widgetPanel.vue @@ -7,6 +7,7 @@

{{ item.name }}

+ Github 源码
@@ -109,6 +110,7 @@ export default { position: relative; // width: 360px; .widget-classify { + position: relative; border-right: 1px solid rgba(0, 0, 0, 0.07); background-color: #ffffff; height: 100%; @@ -212,4 +214,20 @@ export default { } } } + +.github { + cursor: pointer; + position: absolute; + bottom: 12px; + font-size: 12px; + display: flex; + align-items: flex-end; + justify-content: center; + width: 100%; + img { + width: 21px; + height: 21px; + margin: 0 2px; + } +} diff --git a/src/views/components/CopyRight.vue b/src/views/components/CopyRight.vue index 8ee17b9..d0b6006 100644 --- a/src/views/components/CopyRight.vue +++ b/src/views/components/CopyRight.vue @@ -3,7 +3,7 @@ * @Date: 2022-03-25 15:19:02 * @Description: 版权声明 * @LastEditors: ShawnPhang - * @LastEditTime: 2023-07-06 16:48:12 + * @LastEditTime: 2023-08-08 10:09:59 -->