♻️ 封装 share 方法

src/pages/User/Abyss.vue

@@ -69,8 +69,7 @@ import { useUserStore } from "../../store/modules/user";
 // utils
 import TGRequest from "../../web/request/TGRequest";
 import TGSqlite from "../../plugins/Sqlite";
-import html2canvas from "html2canvas";
+import { generateShareImg } from "../../utils/TGShare";
-import { saveCanvasImg } from "../../utils/saveImg";
 
 // store
 const userStore = useUserStore();
@@ -135,40 +134,8 @@ function getAbyssRef (el: HTMLElement): void {
 }
 
 async function shareAbyss (): Promise<void> {
-  const canvas = document.createElement("canvas");
-  // 获取 dom 宽高
-  const width = abyssRef.value.scrollWidth + 50;
-  const height = abyssRef.value.scrollHeight + 50;
-  // 设置 canvas 宽高
-  canvas.width = width * 1.2;
-  canvas.height = height * 1.2;
-  canvas.style.width = `${width}px`;
-  canvas.style.height = `${height}px`;
-  // 图片压缩
-  canvas.getContext("2d")!.scale(1.2, 1.2);
-  // 设置 html2canvas 参数
-  const options = {
-    backgroundColor: getTheme() === "dark" ? "#2c2c2c" : "#ece5d8",
-    windowHeight: height,
-    width,
-    height,
-    useCORS: true,
-    canvas,
-    // 因为有放大，所以需要计算偏移量
-    x: -20,
-    y: -25,
-  };
-  const canvasData = await html2canvas(abyssRef.value, options);
   const fileName = `深渊${curAbyss.value.id}-${user.value.gameUid}-${Math.floor(Date.now() / 1000)}.png`;
-  await saveCanvasImg(canvasData, fileName);
+  await generateShareImg(fileName, abyssRef.value);
-}
-
-function getTheme () {
-  let theme = localStorage.getItem("theme");
-  if (theme) {
-    theme = JSON.parse(theme).theme;
-  }
-  return theme || "default";
 }
 </script>
 <style lang="css" scoped>

src/pages/User/Characters.vue

@@ -1,15 +1,26 @@
 <template>
   <ToLoading v-model="loading" :title="loadingTitle" />
-  <div class="uc-top">
+  <div class="uc-box">
-    <div class="uc-top-title">
+    <div class="uc-top">
-      我的角色
+      <div class="uc-top-title">
+        {{ user.nickname }} UID：{{ user.gameUid }}
+      </div>
+      <v-btn variant="outlined" class="uc-top-btn" @click="refresh()">
+        <template #prepend>
+          <v-icon>mdi-refresh</v-icon>
+        </template>
+        更新数据
+      </v-btn>
+      <v-btn variant="outlined" class="uc-top-btn" @click="shareRoles()">
+        <template #prepend>
+          <v-icon>mdi-share</v-icon>
+        </template>
+        分享
+      </v-btn>
+    </div>
+    <div class="uc-grid">
+      <TUserAvatar v-for="avatar in roleList" :model-value="avatar" />
     </div>
-    <v-btn variant="outlined" @click="refresh">
-      更新数据
-    </v-btn>
-  </div>
-  <div class="uc-grid">
-    <TUserAvatar v-for="avatar in roleList" :model-value="avatar" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -22,10 +33,9 @@ import { fs } from "@tauri-apps/api";
 // store
 import { useAppStore } from "../../store/modules/app";
 import { useUserStore } from "../../store/modules/user";
-// request
-import TGRequest from "../../web/request/TGRequest";
 // utils
-import TGSqlite from "../../plugins/Sqlite";
+import TGRequest from "../../web/request/TGRequest";
+import { generateShareImg } from "../../utils/TGShare";
 
 // store
 const appStore = useAppStore();
@@ -37,21 +47,18 @@ const loadingTitle = ref("");
 
 // data
 const roleList = ref([] as TGApp.Game.Character.ListItem[]);
-const characterCookie = ref({} as TGApp.BBS.Constant.CookieGroup4);
+const characterCookie = computed(() => userStore.getCookieGroup4());
 const user = computed(() => userStore.getCurAccount());
 const filePath = computed(() => `${appStore.dataPath.userDataDir}/roleList.json`);
 
 onMounted(async () => {
   loadingTitle.value = "正在获取角色数据";
   loading.value = true;
-  const curUser = await TGSqlite.getCurAccount();
+  try {
-  if (curUser) {
+    const fileGet = await fs.readTextFile(filePath.value);
-    user.value = curUser;
-  }
-  characterCookie.value = userStore.getCookieGroup4();
-  const fileGet = await fs.readTextFile(filePath.value);
-  if (fileGet) {
     roleList.value = JSON.parse(fileGet);
+  } catch (error) {
+    console.log(error);
   }
   loading.value = false;
 });
@@ -71,23 +78,43 @@ async function refresh () {
   }
   loading.value = false;
 }
+
+async function shareRoles () {
+  const rolesBox = document.querySelector(".uc-box") as HTMLElement;
+  const fileName = `角色列表-${user.value.gameUid}-${Math.floor(Date.now())}.png`;
+  await generateShareImg(fileName, rolesBox);
+}
 </script>
 <style lang="css" scoped>
+.uc-box {
+  width: 100%;
+  border-radius: 5px;
+  padding: 10px;
+  box-shadow: 0 0 10px var(--common-bg-4);
+}
+
 .uc-top {
-  background: rgb(0 0 0 / 20%);
   width: 100%;
   height: 50px;
   border-radius: 5px;
   padding: 10px;
   display: flex;
   align-items: center;
-  font-family: Genshin, sans-serif;
-  font-size: 20px;
-  color: #faf7e8;
 }
 
 .uc-top-title {
+  font-family: var(--font-title);
+  font-size: 20px;
   margin-right: 10px;
+  color: var(--common-text);
+}
+
+.uc-top-btn {
+  font-family: var(--font-text);
+  border-radius: 5px;
+  background: var(--common-bg-2);
+  color: var(--common-color-white);
+  margin-left: 15px;
 }
 
 .uc-grid {

src/pages/User/Record.vue

@@ -54,8 +54,7 @@ import { useUserStore } from "../../store/modules/user";
 // utils
 import TGRequest from "../../web/request/TGRequest";
 import TGSqlite from "../../plugins/Sqlite";
-import html2canvas from "html2canvas";
+import { generateShareImg } from "../../utils/TGShare";
-import { saveCanvasImg } from "../../utils/saveImg";
 
 // store
 const userStore = useUserStore();
@@ -74,7 +73,10 @@ onMounted(async () => {
   loadingTitle.value = "正在加载战绩数据";
   loading.value = true;
   await initUserRecordData();
-  loading.value = false;
+  // 保证图片加载完毕
+  setTimeout(() => {
+    loading.value = false;
+  }, 3000);
 });
 
 async function initUserRecordData () {
@@ -109,27 +111,8 @@ function getTitle () {
 
 async function shareRecord () {
   const recordBox = document.querySelector(".ur-box") as HTMLElement;
-  const canvas = document.createElement("canvas");
-  const width = recordBox.clientWidth + 50;
-  const height = recordBox.offsetHeight + 50;
-  canvas.width = width * 1.2;
-  canvas.height = height * 1.2;
-  canvas.style.width = `${width}px`;
-  canvas.style.height = `${height}px`;
-  canvas.getContext("2d")!.scale(1.2, 1.2);
-  const options = {
-    backgroundColor: getTheme() === "dark" ? "#2c2c2c" : "#ece5d8",
-    windowHeight: height,
-    width,
-    height,
-    useCORS: true,
-    canvas,
-    x: -10,
-    y: -10,
-  };
   const fileName = `战绩-${user.value.gameUid}-${Math.floor(Date.now() / 1000)}`;
-  const canvasData = await html2canvas(recordBox, options);
+  await generateShareImg(fileName, recordBox);
-  await saveCanvasImg(canvasData, fileName);
 }
 
 function getTheme () {

src/utils/TGShare.ts

@@ -0,0 +1,96 @@
+/**
+ * @file utils TGShare.ts
+ * @description 生成分享截图并保存到本地
+ * @author BTMuli <bt-muli@outlook.com>
+ * @since Alpha v0.2.0
+ */
+
+// tauri
+import { dialog, fs, http } from "@tauri-apps/api";
+import html2canvas from "html2canvas";
+
+/**
+ * @description 保存图片-canvas
+ * @since Alpha v0.2.0
+ * @param {HTMLCanvasElement} canvas - canvas元素
+ * @param {string} filename - 文件名
+ * @returns {Promise<void>} 无返回值
+ */
+async function saveCanvasImg (canvas: HTMLCanvasElement, filename: string): Promise<void> {
+  const buffer = new Uint8Array(atob(canvas.toDataURL("image/png").split(",")[1]).split("").map((item) => item.charCodeAt(0)));
+  await dialog.save({
+    defaultPath: filename,
+    filters: [{ name: "图片", extensions: ["png"] }],
+  }).then(async (res) => {
+    if (res === null) return;
+    await fs.writeBinaryFile({
+      path: res,
+      contents: buffer,
+    });
+  });
+}
+
+/**
+ * @description 将图片保存到本地
+ * @since Alpha v0.2.0
+ * @param {string} url - 图片链接
+ * @returns {Promise<string>} 图片元素
+ */
+export async function saveImgLocal (url: string): Promise<string> {
+  return await http.fetch<ArrayBuffer>(url, {
+    method: "GET",
+    responseType: http.ResponseType.Binary,
+  }).then(async (res) => {
+    const buffer = new Uint8Array(res.data);
+    const blob = new Blob([buffer], { type: "image/png" });
+    return URL.createObjectURL(blob);
+  });
+}
+
+/**
+ * @description 获取分享截图背景色
+ * @since Alpha v0.2.0
+ * @returns {string} 背景色
+ */
+function getShareImgBgColor (): string {
+  let theme = localStorage.getItem("theme");
+  if (theme) {
+    theme = JSON.parse(theme).theme;
+  }
+  if (theme === "dark") {
+    return "#2c2c2c";
+  } else {
+    return "#ece5d8";
+  }
+}
+
+/**
+ * @description 生成分享截图
+ * @since Alpha v0.2.0
+ * @param {string} fileName - 文件名
+ * @param {HTMLElement} element - 元素
+ * @param {number} scale - 缩放比例
+ * @returns {Promise<void>} 无返回值
+ */
+export async function generateShareImg (fileName: string, element: HTMLElement, scale: number = 1.2): Promise<void> {
+  const canvas = document.createElement("canvas");
+  const width = element.clientWidth + 50;
+  const height = element.clientHeight + 50;
+  canvas.width = width * scale;
+  canvas.height = height * scale;
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  canvas.getContext("2d")?.scale(scale, scale);
+  const opts = {
+    backgroundColor: getShareImgBgColor(),
+    windowHeight: height,
+    width,
+    height,
+    useCORS: true,
+    canvas,
+    x: -15,
+    y: -15,
+  };
+  const canvasData = await html2canvas(element, opts);
+  await saveCanvasImg(canvasData, fileName);
+}

src/utils/saveImg.ts

@@ -1,47 +0,0 @@
-/**
- * @file utils saveImg.ts
- * @description 用于保存图片的工具模块
- * @author BTMuli <bt-muli@outlook.com>
- * @since Alpha v0.2.0
- */
-
-// tauri
-import { dialog, fs, http } from "@tauri-apps/api";
-
-/**
- * @description 保存图片-canvas
- * @since Alpha v0.2.0
- * @param {HTMLCanvasElement} canvas - canvas元素
- * @param {string} filename - 文件名
- * @returns {Promise<void>} 无返回值
- */
-export async function saveCanvasImg (canvas: HTMLCanvasElement, filename: string): Promise<void> {
-  const buffer = new Uint8Array(atob(canvas.toDataURL("image/png").split(",")[1]).split("").map((item) => item.charCodeAt(0)));
-  await dialog.save({
-    defaultPath: filename,
-    filters: [{ name: "图片", extensions: ["png"] }],
-  }).then(async (res) => {
-    if (res === null) return;
-    await fs.writeBinaryFile({
-      path: res,
-      contents: buffer,
-    });
-  });
-}
-
-/**
- * @description 将图片保存到本地
- * @since Alpha v0.2.0
- * @param {string} url - 图片链接
- * @returns {Promise<string>} 图片元素
- */
-export async function saveImgLocal (url: string): Promise<string> {
-  return await http.fetch<ArrayBuffer>(url, {
-    method: "GET",
-    responseType: http.ResponseType.Binary,
-  }).then(async (res) => {
-    const buffer = new Uint8Array(res.data);
-    const blob = new Blob([buffer], { type: "image/png" });
-    return URL.createObjectURL(blob);
-  });
-}