🚸 支持配置图像质量

src/components/viewPost/tp-image.vue

@@ -2,7 +2,7 @@
   <div class="tp-image-box" @click="showOverlay = true" v-if="localUrl !== undefined">
     <img :src="localUrl" :alt="props.data.insert.image" :title="getImageTitle()" />
   </div>
-  <div v-else class="tp-image-load" :title="getImageUrl()">
+  <div v-else class="tp-image-load" :title="props.data.insert.image">
     <v-progress-circular :indeterminate="true" color="primary" size="small" />
     <span>加载中...</span>
   </div>
@@ -13,6 +13,7 @@ import { computed, onMounted, onUnmounted, ref } from "vue";
 
 import VpOverlayImage from "./vp-overlay-image.vue";
 
+import { useAppStore } from "@/store/modules/app.js";
 import { saveImgLocal } from "@/utils/TGShare.js";
 import { bytesToSize } from "@/utils/toolFunc.js";
 
@@ -28,6 +29,7 @@ export type TpImage = {
 };
 type TpImageProps = { data: TpImage };
 
+const appStore = useAppStore();
 const props = defineProps<TpImageProps>();
 const showOverlay = ref<boolean>(false);
 const localUrl = ref<string>();
@@ -41,7 +43,7 @@ const imgWidth = computed<string>(() => {
 console.log("tp-image", props.data.insert.image, props.data.attributes);
 
 onMounted(async () => {
-  const link = getImageUrl();
+  const link = appStore.getImageUrl(props.data.insert.image);
   localUrl.value = await saveImgLocal(link);
 });
 
@@ -63,13 +65,6 @@ function getImageTitle(): string {
   }
   return res.join("\n");
 }
-
-function getImageUrl(): string {
-  const img = props.data.insert.image;
-  const append = "?x-oss-process=image/format,png";
-  if (img.endsWith(".gif")) return img;
-  return img + append;
-}
 </script>
 <style lang="css" scoped>
 .tp-image-box {

src/components/viewPost/tp-linkCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tp-link-card-box">
-    <img :src="cover" alt="cover" @click="toLink()" />
+    <img :src="cover" alt="cover" @click="toLink()" v-if="cover" />
     <div class="tp-link-card-content">
       <span>{{ props.data.insert.link_card.title }}</span>
       <div v-if="props.data.insert.link_card.price" class="tp-link-card-price">
@@ -15,6 +15,7 @@ import showSnackbar from "@comp/func/snackbar.js";
 import { computed, onMounted, onUnmounted, ref, toRaw } from "vue";
 import { useRouter } from "vue-router";
 
+import { useAppStore } from "@/store/modules/app.js";
 import { parseLink, parsePost } from "@/utils/linkParser.js";
 import { saveImgLocal } from "@/utils/TGShare.js";
 
@@ -39,8 +40,9 @@ type TpLinkCardProps = { data: TpLinkCard };
 
 const props = defineProps<TpLinkCardProps>();
 const router = useRouter();
+const appStore = useAppStore();
 
-const cover = ref<string>(props.data.insert.link_card.cover);
+const cover = ref<string>();
 const btnText = computed<string>(() => {
   if (!props.data.insert.link_card.button_text || props.data.insert.link_card.button_text === "") {
     return "详情";
@@ -49,15 +51,12 @@ const btnText = computed<string>(() => {
 });
 
 onMounted(async () => {
-  if (!cover.value.startsWith("blob:")) {
-    cover.value = await saveImgLocal(props.data.insert.link_card.cover);
-  }
+  const coverLink = appStore.getImageUrl(props.data.insert.link_card.cover);
+  cover.value = await saveImgLocal(coverLink);
 });
 
 onUnmounted(() => {
-  if (cover.value.startsWith("blob:")) {
-    URL.revokeObjectURL(cover.value);
-  }
+  if (cover.value) URL.revokeObjectURL(cover.value);
 });
 
 console.log("tpLinkCard", props.data.insert.link_card.card_id, toRaw(props.data).insert.link_card);

src/components/viewPost/tp-video.vue

@@ -32,7 +32,7 @@ import Bili from "@Bili/index.js";
 import showSnackbar from "@comp/func/snackbar.js";
 import { onMounted, onUnmounted, ref, shallowRef } from "vue";
 
-import { getImageBuffer } from "@/utils/TGShare.js";
+import { saveImgLocal } from "@/utils/TGShare.js";
 import { getVideoDuration, timestampToDate } from "@/utils/toolFunc.js";
 
 type TpVideo = { insert: { video: string } };
@@ -42,7 +42,6 @@ const props = defineProps<TpVideoProps>();
 const videoAspectRatio = ref<number>(16 / 9);
 const videoCover = ref<string>();
 const videoData = shallowRef<TGApp.Plugins.Bili.Video.ViewData>();
-const coverBuffer = shallowRef<Uint8Array | null>(null);
 
 console.log("tpVideo", props.data.insert.video);
 
@@ -58,8 +57,7 @@ onMounted(async () => {
   const meta = videoData.value.dimension;
   if (meta.width > meta.height) videoAspectRatio.value = meta.width / meta.height;
   else videoAspectRatio.value = meta.height / meta.width;
-  coverBuffer.value = await getImageBuffer(videoData.value.pic);
-  videoCover.value = URL.createObjectURL(new Blob([coverBuffer.value], { type: "image/png" }));
+  videoCover.value = await saveImgLocal(videoData.value.pic);
 });
 
 onUnmounted(() => {

src/components/viewPost/tp-vod.vue

@@ -23,9 +23,10 @@
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import Artplayer from "artplayer";
 import type { Option } from "artplayer/types/option.js";
-import { onMounted, ref, shallowRef, toRaw } from "vue";
+import { onMounted, onUnmounted, ref, shallowRef, toRaw } from "vue";
 
-import { getImageBuffer, saveCanvasImg } from "@/utils/TGShare.js";
+import { useAppStore } from "@/store/modules/app.js";
+import { getImageBuffer, saveCanvasImg, saveImgLocal } from "@/utils/TGShare.js";
 import { getVideoDuration } from "@/utils/toolFunc.js";
 
 type TpVod = {
@@ -52,10 +53,12 @@ type TpVod = {
 };
 type TpVodProps = { data: TpVod };
 
+const appStore = useAppStore();
 const props = defineProps<TpVodProps>();
-const container = shallowRef<Artplayer | null>(null);
+const coverUrl = ref<string>();
 const vodAspectRatio = ref<number>(16 / 9);
 const coverBuffer = shallowRef<Uint8Array | null>(null);
+const container = shallowRef<Artplayer | null>(null);
 
 console.log("tpVod", props.data.insert.vod.id, toRaw(props.data).insert.vod);
 
@@ -70,6 +73,8 @@ onMounted(async () => {
     if (width > height) vodAspectRatio.value = width / height;
     else vodAspectRatio.value = height / width;
   }
+  const localUrl = appStore.getImageUrl(props.data.insert.vod.cover);
+  coverUrl.value = await saveImgLocal(localUrl);
   const option: Option = {
     id: props.data.insert.vod.id,
     container: `#tp-vod-${props.data.insert.vod.id}`,
@@ -116,6 +121,16 @@ onMounted(async () => {
   container.value = new Artplayer(option);
   container.value?.on("fullscreen", async (s) => await getCurrentWindow().setFullscreen(s));
 });
+
+onUnmounted(() => {
+  container.value?.destroy();
+  if (coverBuffer.value) {
+    coverBuffer.value = null;
+  }
+  if (coverUrl.value) {
+    URL.revokeObjectURL(coverUrl.value);
+  }
+});
 </script>
 <style lang="css" scoped>
 .tp-vod-box {

src/components/viewPost/vp-overlay-image.vue

@@ -2,7 +2,7 @@
   <TOverlay v-model="visible" blur-val="10px">
     <div class="tpoi-box">
       <div :class="{ 'tpoi-top-ori': isOriSize, 'tpoi-top': !isOriSize }">
-        <img :src="props.image.insert.image" alt="图片" @click="isOriSize = !isOriSize" />
+        <img :src="localCover" alt="图片" @click="isOriSize = !isOriSize" v-if="localCover" />
       </div>
       <div class="tpoi-bottom">
         <div class="tpoi-info" v-if="props.image.attributes">
@@ -25,19 +25,22 @@
 <script setup lang="ts">
 import TOverlay from "@comp/app/t-overlay.vue";
 import showSnackbar from "@comp/func/snackbar.js";
-import { computed, ref, shallowRef } from "vue";
+import { computed, onMounted, onUnmounted, ref, shallowRef } from "vue";
 
 import type { TpImage } from "./tp-image.vue";
 
-import { copyToClipboard, getImageBuffer, saveCanvasImg } from "@/utils/TGShare.js";
+import { useAppStore } from "@/store/modules/app.js";
+import { copyToClipboard, getImageBuffer, saveCanvasImg, saveImgLocal } from "@/utils/TGShare.js";
 import { bytesToSize } from "@/utils/toolFunc.js";
 
 type TpoImageProps = { image: TpImage };
 
+const appStore = useAppStore();
 const props = defineProps<TpoImageProps>();
 const visible = defineModel<boolean>();
 const bgMode = ref<number>(0); // 0: transparent, 1: black, 2: white
 const isOriSize = ref<boolean>(false);
+const localCover = ref<string>();
 const buffer = shallowRef<Uint8Array | null>(null);
 const format = computed<string>(() => {
   if (props.image.attributes?.ext) return props.image.attributes.ext;
@@ -46,6 +49,16 @@ const format = computed<string>(() => {
   return "png";
 });
 
+onMounted(async () => {
+  const link = appStore.getImageUrl(props.image.insert.image);
+  localCover.value = await saveImgLocal(link);
+});
+
+onUnmounted(() => {
+  if (localCover.value) URL.revokeObjectURL(localCover.value);
+  buffer.value = null;
+});
+
 function setBlackBg(): void {
   bgMode.value = (bgMode.value + 1) % 3;
   const bgLabelList = ["透明", "黑色", "白色"];