github/poster-design
1
0
Fork 0
mirror of https://github.com/palxiao/poster-design.git synced 2025-07-15 16:02:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: readme

Browse Source
This commit is contained in:
ShawnPhang 2023-07-18 16:42:19 +08:00
parent 94d63a2a4f
commit 84ab19185b
3 changed files with 15 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
README.md
View File

@ -14,12 +14,23 @@
- 技术栈：Vue3 、Vite2 、Vuex 、ElementPlus - 技术栈：Vue3 、Vite2 、Vuex 、ElementPlus
- 图片生成：Puppeteer、Express - 图片生成：Puppeteer、Express
一些可独立的功能会被抽取出来作为单独的库引入使用，仓库地址：[front-end-arsenal](https://github.com/palxiao/front-end-arsenal)（[组件文档网站](https://fe-doc.palxp.com/#/)） ### 支持功能
> 环境需求：**Node.js v16** 以上版本 - 导入 PSD 设计稿，导出图片下载
- 元素拖拽、组合、缩放、层级调整、对齐等操作。
- 图片素材插入、替换、裁剪，图片容器等功能。
- SVG 素材颜色、透明度编辑，文字花字组合。
- 画布自定义尺寸、滚轮缩放、自适应画布
- 吸附对齐、辅助引导线、标尺功能。
- 键盘快捷键、右键菜单快捷操作，复制删除等常用操作。
- 风格二维码编辑，支持单色、渐变、自定义 logo 等。
- 图层操作，支持拖拽变更层级。
- 颜色调色板，原生级取色器颜色吸管（Chrome）。
### 拉取源码 ### 拉取源码
> 环境需求：**Node.js v16** 以上版本
``` ```
git clone https://github.com/palxiao/poster-design.git git clone https://github.com/palxiao/poster-design.git
cd poster-design cd poster-design
@ -74,7 +85,7 @@ apt-get update
apt-get install -y google-chrome-stable // 安装最新稳定版谷歌浏览器 apt-get install -y google-chrome-stable // 安装最新稳定版谷歌浏览器
``` ```
## Docker 容器 ### Docker 容器部署
可以通过 Docker 运行一个带 Linux 浏览器的容器，然后暴露一个截图服务以供使用，我所使用的基础镜像为： 可以通过 Docker 运行一个带 Linux 浏览器的容器，然后暴露一个截图服务以供使用，我所使用的基础镜像为：
@ -105,19 +116,6 @@ docker run -itd -u root -v ~/data/tmp/screenshot:/cache -p 9001:9001 --name scre
这种方式只需要一个镜像以及一个启动命令即可部署，重新跑一遍命令也就相当于重启整个容器。 这种方式只需要一个镜像以及一个启动命令即可部署，重新跑一遍命令也就相当于重启整个容器。
### 支持功能
- 导入 PSD 设计稿，导出图片下载
- 元素拖拽、组合、缩放、层级调整、对齐等操作。
- 图片素材插入、替换、裁剪，图片容器等功能。
- SVG 素材颜色、透明度编辑，文字花字组合。
- 画布自定义尺寸、滚轮缩放、自适应画布
- 吸附对齐、辅助引导线、标尺功能。
- 键盘快捷键、右键菜单快捷操作，复制删除等常用操作。
- 风格二维码编辑，支持单色、渐变、自定义 logo 等。
- 图层操作，支持拖拽变更层级。
- 颜色调色板，原生级取色器颜色吸管（Chrome）。
### 感谢 ### 感谢
本项目使用或参考了一些优秀开源项目，包括但不限于： 本项目使用或参考了一些优秀开源项目，包括但不限于：

3
index.html
View File

@ -3,7 +3,7 @@
* @Date: 2022-01-17 16:06:30 * @Date: 2022-01-17 16:06:30
* @Description: Design Palxp * @Description: Design Palxp
* @LastEditors: ShawnPhang <site: book.palxp.com> * @LastEditors: ShawnPhang <site: book.palxp.com>
* @LastEditTime: 2023-07-13 10:32:13 * @LastEditTime: 2023-07-18 16:35:55
--> -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
@ -18,6 +18,5 @@
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
<script defer src="/snap.svg-min.js"></script> <script defer src="/snap.svg-min.js"></script>
<!-- <script defer src="https://cdn.palxp.com/snap.svg-min.js"></script> -->
</body> </body>
</html> </html>

51
vue.config.js
View File

@ -1,51 +0,0 @@
/*
* @Author: ShawnPhang
* @Date: 2021-08-19 18:30:38
* @Description:
* @LastEditors: ShawnPhang
* @LastEditTime: 2021-08-19 18:39:04
*/
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
publicPath: isProduction ? './' : '/',
productionSourceMap: false,
transpileDependencies: [
// 'html2canvas',
// 'vuejs-datepicker',
// 'vue-clipboard2'
],
configureWebpack: (config) => {
if (isProduction) {
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8,
}),
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: false,
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
}),
)
// 分离包
config.externals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
// 'immutable': 'Immutable'
// 'vant': 'vant'
}
}
},
}