🌱 尝试snapdom

package.json

@@ -82,6 +82,7 @@
     "@tauri-apps/plugin-process": "^2.2.1",
     "@tauri-apps/plugin-shell": "^2.2.1",
     "@tauri-apps/plugin-sql": "^2.2.0",
+    "@zumer/snapdom": "^1.2.5",
     "ajv": "^8.17.1",
     "artplayer": "^5.2.3",
     "clipboard": "^2.0.11",

pnpm-lock.yaml

@@ -44,6 +44,9 @@ importers:
       '@tauri-apps/plugin-sql':
         specifier: ^2.2.0
         version: 2.2.0
+      '@zumer/snapdom':
+        specifier: ^1.2.5
+        version: 1.2.5
       ajv:
         specifier: ^8.17.1
         version: 8.17.1
@@ -1205,6 +1208,9 @@ packages:
       vue: ^3.0.0
       vuetify: ^3.0.0
 
+  '@zumer/snapdom@1.2.5':
+    resolution: {integrity: sha512-/zXAzh3Y0s7Gftf8rTNkl+rWJewQKz66mqm3BAhM1zi4FeARVUKa5BEW+BE5cynlKhLndJiElROrorxhNRiXLA==}
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -4494,6 +4500,8 @@ snapshots:
       vue: 3.5.16(typescript@5.8.3)
       vuetify: 3.8.8(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.16(typescript@5.8.3))
 
+  '@zumer/snapdom@1.2.5': {}
+
   acorn-jsx@5.3.2(acorn@8.15.0):
     dependencies:
       acorn: 8.15.0

src/utils/TGShare.ts

@@ -1,7 +1,7 @@
 /**
  * @file utils/TGShare.ts
  * @description 生成分享截图并保存到本地
- * @since Beta v0.7.2
+ * @since Beta v0.7.7
  */
 
 import showSnackbar from "@comp/func/snackbar.js";
@@ -11,6 +11,7 @@ import { sep } from "@tauri-apps/api/path";
 import { save } from "@tauri-apps/plugin-dialog";
 import { writeFile } from "@tauri-apps/plugin-fs";
 import { platform } from "@tauri-apps/plugin-os";
+import { snapdom } from "@zumer/snapdom";
 import html2canvas from "html2canvas";
 import { storeToRefs } from "pinia";
 
@@ -84,9 +85,36 @@ function getShareImgBgColor(): string {
   return "#f9f6f2";
 }
 
+/**
+ * @description 开发环境生成分享截图
+ * @since Beta v0.7.7
+ * @see https://github.com/zumerlab/snapdom
+ * @param {string} fileName - 文件名
+ * @param {HTMLElement} element - 元素
+ * @param {number} scale - 缩放比例
+ * @returns {Promise<void>} 无返回值
+ */
+async function genShareImgDev(
+  fileName: string,
+  element: HTMLElement,
+  scale: number = 1.2,
+): Promise<void> {
+  const bgColor = getShareImgBgColor();
+  await snapdom.download(element, {
+    scale: scale,
+    backgroundColor: bgColor,
+    embedFonts: true,
+    format: "webp",
+    filename: fileName,
+    compress: false,
+    quality: 1,
+    dpr: 1,
+  });
+}
+
 /**
  * @description 生成分享截图
- * @since Beta v0.7.1
+ * @since Beta v0.7.7
  * @param {string} fileName - 文件名
  * @param {HTMLElement} element - 元素
  * @param {number} scale - 缩放比例
@@ -99,6 +127,12 @@ export async function generateShareImg(
   scale: number = 1.2,
   scrollable: boolean = false,
 ): Promise<void> {
+  if (import.meta.env.DEV) {
+    if (Math.random() < 0.1) {
+      await genShareImgDev(fileName, element, scale);
+    }
+    return;
+  }
   const canvas = document.createElement("canvas");
   const maxHeight = element.style.maxHeight;
   if (scrollable) element.style.maxHeight = "100%";