code mixin

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` <br /> `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** 支持一下~ 感谢！
 

screenshot/README.md

@@ -1,25 +1,47 @@
-<!--
- * @Author: ShawnPhang
- * @Date: 2022-02-01 13:41:59
- * @Description:  
- * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-18 16:30:53
--->
-# Node截图服务
 
-### npm run dev
+## Node截图服务
 
-ts-node 直接运行，并监听文件修改自动热重启
+目录结构比较简单，主要就实现了三个接口，其中 `api/screenshots` 即是项目中所使用到的图片生成接口，在真实生产项目中可以把该服务单独部署，于内网调用，这样利于做一些鉴权之类的处理。
 
-### npm run build
+另外 `api/printscreen` 这个接口实现的是网页截图的 API，该接口可以传入一个 URL 对整个网页进行截图，本项目中没有使用到此接口。
 
-使用 webpack 打包文件
+### 安装依赖
 
-### build:apidoc
+`npm install` 或 `yarn`
 
-生成 API 文档
+### 启动项目并热更新
 
-### npm run serve (不使用)
+`npm run dev`
 
-webpack/tsc 编译 ts，supervisor/pm2 监听编译后文件变动重启服务，gulp 自动化任务
+### 打包
 
+`npm run build`
+
+#### 打包说明
+
+由于项目依赖在打包时会出现许多未知错误，所以在 **webpack.config.js** 中过滤掉了依赖，打包出来的文件会非常小因为只包含项目代码，需要将 `package.json` 放到服务器上安装依赖来使用，具体的做法类似以下步骤：
+
+1. 将项目中的 `package-build.json` 上传到服务器中，重命名为 `package.json`
+2. 目录下执行 `yarn` 安装依赖
+3. 将打包的 `dist/server.js` 放在同个目录中
+4. `pm2 start server.js` 服务启动
+
+### 服务器配置
+
+在 Linux 环境下，npm 自动安装的 Chrome 浏览器有可能会出错，所以推荐从外部安装好浏览器，再给项目中的配置文件 `src/config.ts` 设置好路径，例如：
+
+```js
+exports.executablePath = '/opt/google/chrome-unstable/chrome'
+```
+
+一些可能用到的 linux 命令参考：
+
+```shell
+google-chrome --version # 查看浏览器版本号
+apt-get update
+apt-get install -y google-chrome-stable // 安装最新稳定版谷歌浏览器
+```
+
+### 生成 API 文档
+
+`build:apidoc`

screenshot/package-build.json

@@ -10,9 +10,7 @@
     "body-parser": "^1.19.0",
     "express": "^4.17.1",
     "puppeteer": "^10.4.0",
-    "images": "3.2.3",
-    "png-js": "^1.0.0",
-    "gif-encoder-2": "^1.0.5"
+    "images": "3.2.3"
   },
   "devDependencies": {}
 }

screenshot/src/control/api.ts

@@ -1,9 +1,9 @@
 /*
  * @Author: ShawnPhang
  * @Date: 2020-07-22 20:13:14
- * @Description:  
+ * @Description: 接口名称
  * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-06 16:00:09
+ * @LastEditTime: 2023-07-27 17:51:53
  */
 let path = '/api';
 

screenshot/src/control/router.ts

@@ -1,9 +1,9 @@
 /*
  * @Author: ShawnPhang
  * @Date: 2020-07-22 20:13:14
- * @Description:  
+ * @Description: 路由
  * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-06 15:59:58
+ * @LastEditTime: 2023-07-27 17:51:36
  */
 const rExpress = require('express');
 const screenshots = require('../service/screenshots.ts');
@@ -11,8 +11,11 @@ const api = require('./api.ts');
 const rRouter = rExpress.Router();
 
 rRouter.get(api.SCREENGHOT, screenshots.screenshots);
+
+if (process.env.NODE_ENV === 'development') {
     rRouter.get(api.PRINTSCREEN, screenshots.printscreen);
     rRouter.get(api.GETIMAGE, screenshots.getImg);
+}
 
 module.exports = rRouter;
 

screenshot/src/service/screenshots.ts

@@ -59,7 +59,7 @@ module.exports = {
     let { id, tempid, width, height, screenshot_url, type = 'file', size, quality } = req.query
     const defaultUrl = isDev ? 'http://localhost:3000/draw' : 'https://design.palxp.com/draw'
     const url = (screenshot_url || defaultUrl) + `${id ? '?id=' : '?tempid='}`
-    id = id || '_' + tempid
+    id = id || tempid
     const path = filePath + `${id}-screenshot.png`
     const thumbPath = type === 'cover' ? filePath + `${id}-cover.jpg` : null
 

screenshot/src/utils/download-single.ts

@@ -3,7 +3,7 @@
  * @Date: 2021-09-30 14:47:22
  * @Description: 下载图片（单浏览器版，适用于低配置服务器）
  * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-17 18:03:57
+ * @LastEditTime: 2023-07-27 18:38:33
  */
 const isDev = process.env.NODE_ENV === 'development'
 const puppeteer = require('puppeteer')
@@ -25,10 +25,17 @@ const saveScreenshot = async (url: string, { path, width, height, thumbPath, siz
     // 打开页面
     const page = await browser.newPage()
     // 设置浏览器视窗
+    // 4K规格，总计约830万像素 3840 * 2160 2K规格，总计约830万像素 2048 * 1080
+    // const maxPXs = 8294400 
+    const maxPXs = 4211840
+    function limiter(w: number, h: number) {
+      // 限制器，超出规格会降低dpr输出，节省服务器资源
+      return w*h < maxPXs ? 1 : +(1/(w*h) * maxPXs).toFixed(2)
+    }
     page.setViewport({
       width: Number(width),
       height: Number(height),
-      deviceScaleFactor: !isNaN(scale) ? (+scale > 4 ? 4 : +scale) : 1,
+      deviceScaleFactor: !isNaN(scale) ? (+scale > 4 ? 4 : +scale) : limiter(Number(width), Number(height)),
     })
     ua && page.setUserAgent(ua)
     if (devices) {