feat: support transparent png download

screenshot/src/utils/download-single.ts

@@ -3,7 +3,7 @@
  * @Date: 2021-09-30 14:47:22
  * @Description: 下载图片（单浏览器版，适用于低配置服务器）
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-16 20:30:38
+ * @LastEditTime: 2023-09-18 18:17:54
  */
 const isDev = process.env.NODE_ENV === 'development'
 const puppeteer = require('puppeteer')
@@ -67,7 +67,8 @@ const saveScreenshot = async (url: string, { path, width, height, thumbPath, siz
     // 主动模式下注入全局方法
     await page.exposeFunction('loadFinishToInject', async () => {
       // console.log('-> 开始截图')
-      await page.screenshot({ path })
+      // await page.evaluate(() => document.body.style.background = 'transparent');
+      await page.screenshot({ path, omitBackground: true })
       // 关闭浏览器
       browserClose()
       compress()

screenshot/src/utils/download.ts

@@ -55,7 +55,7 @@ const saveScreenshot = async (url: string, { path, width, height, thumbPath, siz
       // 主动模式下注入全局方法
       await page.exposeFunction('loadFinishToInject', async () => {
         clearTimeout(regulators)
-        await page.screenshot({ path }) // console.log('-> 开始截图')
+        await page.screenshot({ path, omitBackground: true })
         await page.close()
         thumbPath && compress()
         resolve()

src/App.vue

@@ -1,3 +1,10 @@
+<!--
+ * @Author: ShawnPhang
+ * @Date: 2023-09-18 17:34:44
+ * @Description:  
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2023-09-18 18:05:22
+-->
 <template>
   <div id="appindex">
     <div class="viewWrap">
@@ -10,7 +17,7 @@
 #appindex {
   min-width: 1180px;
   .viewWrap {
-    background-color: #ffffff;
+    // background-color: #ffffff;
     min-height: calc(110vh - 110px);
     min-width: 1170px;
   }