diff --git a/README.md b/README.md index b00abf1..00a7bd8 100644 --- a/README.md +++ b/README.md @@ -14,12 +14,23 @@ - 技术栈：Vue3 、Vite2 、Vuex 、ElementPlus - 图片生成：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 cd poster-design @@ -74,7 +85,7 @@ apt-get update apt-get install -y google-chrome-stable // 安装最新稳定版谷歌浏览器 ``` -## Docker 容器 +### Docker 容器部署 可以通过 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）。 - ### 感谢 本项目使用或参考了一些优秀开源项目，包括但不限于： diff --git a/index.html b/index.html index 33726de..2f85146 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ * @Date: 2022-01-17 16:06:30 * @Description: Design Palxp * @LastEditors: ShawnPhang - * @LastEditTime: 2023-07-13 10:32:13 + * @LastEditTime: 2023-07-18 16:35:55 --> @@ -18,6 +18,5 @@
- diff --git a/vue.config.js b/vue.config.js deleted file mode 100644 index b1b9abf..0000000 --- a/vue.config.js +++ /dev/null @@ -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' - } - } - }, -}