🚸 查看原图

src/components/viewPost/tp-image.vue

@@ -1,15 +1,30 @@
 <template>
   <div class="tp-image-box" @click="showOverlay = true" v-if="localUrl !== undefined">
     <img :src="localUrl" :alt="props.data.insert.image" :title="getImageTitle()" />
+    <div
+      class="act"
+      @click.stop="showOri = true"
+      title="查看原图"
+      v-if="!showOri"
+      data-html2canvas-ignore
+    >
+      <v-icon size="16" color="white">mdi-magnify</v-icon>
+    </div>
   </div>
   <div v-else class="tp-image-load" :title="props.data.insert.image">
     <v-progress-circular :indeterminate="true" color="primary" size="small" />
     <span>加载中...</span>
   </div>
-  <VpOverlayImage :image="props.data" v-model="showOverlay" />
+  <VpOverlayImage
+    :image="props.data"
+    v-model="showOverlay"
+    v-model:link="localUrl"
+    v-model:ori="showOri"
+  />
 </template>
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import showLoading from "@comp/func/loading.js";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 
 import VpOverlayImage from "./vp-overlay-image.vue";
 
@@ -32,6 +47,7 @@ type TpImageProps = { data: TpImage };
 const appStore = useAppStore();
 const props = defineProps<TpImageProps>();
 const showOverlay = ref<boolean>(false);
+const showOri = ref<boolean>(props.data.insert.image.endsWith(".gif"));
 const localUrl = ref<string>();
 
 const imgWidth = computed<string>(() => {
@@ -47,6 +63,17 @@ onMounted(async () => {
   localUrl.value = await saveImgLocal(link);
 });
 
+watch(
+  () => showOri.value,
+  async () => {
+    if (!showOri.value) return;
+    await showLoading.start("加载中...");
+    if (localUrl.value) URL.revokeObjectURL(localUrl.value);
+    localUrl.value = await saveImgLocal(props.data.insert.image);
+    await showLoading.end();
+  },
+);
+
 onUnmounted(() => {
   if (localUrl.value) URL.revokeObjectURL(localUrl.value);
 });
@@ -68,6 +95,7 @@ function getImageTitle(): string {
 </script>
 <style lang="css" scoped>
 .tp-image-box {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -89,4 +117,20 @@ function getImageTitle(): string {
   margin: 10px auto;
   column-gap: 5px;
 }
+
+.act {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  display: flex;
+  width: 25px;
+  height: 25px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--tgc-od-white);
+  box-shadow: 0 0 5px rgb(0 0 0 / 50%);
+  cursor: pointer;
+}
 </style>

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="localCover" alt="图片" @click="isOriSize = !isOriSize" v-if="localCover" />
+        <img :src="localLink" alt="图片" @click="isOriSize = !isOriSize" />
       </div>
       <div class="tpoi-bottom">
         <div class="tpoi-info" v-if="props.image.attributes">
@@ -13,7 +13,10 @@
           <p>格式：{{ format }}</p>
         </div>
         <div class="tpoi-tools">
-          <v-icon @click="setBlackBg" title="切换背景色">mdi-format-color-fill</v-icon>
+          <v-icon @click="setBlackBg" title="切换背景色" v-if="showOri">
+            mdi-format-color-fill
+          </v-icon>
+          <v-icon @click="showOri = true" title="查看原图" v-else>mdi-magnify</v-icon>
           <v-icon @click="onCopy" title="复制到剪贴板">mdi-content-copy</v-icon>
           <v-icon @click="onDownload" title="下载到本地">mdi-download</v-icon>
           <v-icon @click="visible = false" title="关闭浮窗">mdi-close</v-icon>
@@ -26,22 +29,21 @@
 import TOverlay from "@comp/app/t-overlay.vue";
 import showLoading from "@comp/func/loading.js";
 import showSnackbar from "@comp/func/snackbar.js";
-import { computed, onMounted, onUnmounted, ref, shallowRef } from "vue";
+import { computed, ref, shallowRef } from "vue";
 
 import type { TpImage } from "./tp-image.vue";
 
-import { useAppStore } from "@/store/modules/app.js";
+import { copyToClipboard, getImageBuffer, saveCanvasImg } from "@/utils/TGShare.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 localLink = defineModel<string>("link");
+const showOri = defineModel<boolean>("ori");
 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;
@@ -50,16 +52,6 @@ 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 = ["透明", "黑色", "白色"];