update

src/pages/InviteFriends/Poster.vue

@@ -1,6 +1,6 @@
 <script setup>
 import UQRCode from 'uqrcodejs';
-import {onMounted, ref} from 'vue';
+import {onMounted, ref, onUnmounted} from 'vue';
 
 const emits = defineEmits(['handleLongPress']);
 const {bg, invite, member_url} = defineProps({
@@ -25,13 +25,22 @@ const itemList = [
 const CanvasRef = ref();
 const QRRef = ref();
 let canvas = null;
+let timer = null;
+const imageSrc = ref(null);
 onMounted(() => {
     const _canvas = CanvasRef.value.$el.children[0];
     const ctx = _canvas.getContext("2d");
     canvas = _canvas;
     draw(ctx, _canvas);
+    timer = setInterval(() => {
+        imageSrc.value = canvas.toDataURL('image/png')
+    }, 1000)
 });
 
+onUnmounted(() => {
+    clearInterval(timer);
+})
+
 const draw = (ctx, canvas) => {
     const img = new Image();
     img.crossOrigin = 'Anonymous';
@@ -59,18 +68,15 @@ const draw = (ctx, canvas) => {
         });
     }
 }
-
-const handleLongPress = () => {
-    emits('handleLongPress', canvas.toDataURL('image/png'));
-}
 </script>
 
 <template>
-    <view class="!size-full relative" @longpress="handleLongPress">
+    <view class="!size-full relative">
         <canvas class="!absolute !size-[200px] opacity-0" ref="QRRef"></canvas>
         <canvas
             class="!size-full"
             ref="CanvasRef"/>
+        <image class="!size-full !absolute z-50 left-0 top-0 test" :src="imageSrc"></image>
     </view>
 </template>