feat: page size limit

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);
-rRouter.get(api.PRINTSCREEN, screenshots.printscreen);
-rRouter.get(api.GETIMAGE, screenshots.getImg);
+
+if (process.env.NODE_ENV === 'development') {
+    rRouter.get(api.PRINTSCREEN, screenshots.printscreen);
+    rRouter.get(api.GETIMAGE, screenshots.getImg);
+}
 
 module.exports = rRouter;
 

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) {

src/components/modules/settings/numberInput.vue

@@ -45,6 +45,7 @@ export default {
     step: {
       default: 1,
     },
+    maxValue: {},
   },
   emits: ['finish', 'update:modelValue'],
   data() {
@@ -66,12 +67,18 @@ export default {
   methods: {
     fixedNum() {
       // 小数点过长时
-      const num = String(this.modelValue).split('.')[1]
-      if (num && num.length > 2) {
+      const decimal = String(this.modelValue).split('.')[1]
+      if (decimal && decimal.length > 2) {
         setTimeout(() => {
           this.updateValue(Number(this.modelValue).toFixed(2))
         }, 10)
       }
+      // 超过阈值时
+      if (this.maxValue && this.modelValue > this.maxValue) {
+        setTimeout(() => {
+          this.updateValue(Number(this.maxValue))
+        }, 10)
+      }
     },
     updateValue(value) {
       this.$emit('update:modelValue', value)
@@ -220,4 +227,4 @@ export default {
     width: 100%;
   }
 }
-</style>
+</style>

src/components/modules/widgets/pageStyle.vue

@@ -3,8 +3,8 @@
     <el-collapse v-model="activeNames">
       <el-collapse-item title="画布尺寸" name="1">
         <div class="position-size">
-          <number-input v-model="innerElement.width" label="宽" @finish="(value) => finish('width', value)" />
-          <number-input v-model="innerElement.height" label="高" @finish="(value) => finish('height', value)" />
+          <number-input v-model="innerElement.width" label="宽" :maxValue="5000" @finish="(value) => finish('width', value)" />
+          <number-input v-model="innerElement.height" label="高" :maxValue="5000" @finish="(value) => finish('height', value)" />
         </div>
       </el-collapse-item>
       <el-collapse-item title="背景设置" name="2">