update

src/pages/InviteFriends/Poster.vue

@@ -0,0 +1,79 @@
+<script setup>
+import UQRCode from 'uqrcodejs';
+import {onMounted, ref} from 'vue';
+
+const emits = defineEmits(['handleLongPress']);
+const {bg, invite, member_url} = defineProps({
+    bg: {
+        type: String,
+        default: null
+    },
+    invite: {
+        type: String,
+        default: null
+    },
+    member_url: {
+        type: String,
+        default: null
+    },
+});
+
+const itemList = [
+    {text: '置顶', type: 1},
+    {text: '取消', type: 0},
+]
+const CanvasRef = ref();
+const QRRef = ref();
+let canvas = null;
+onMounted(() => {
+    const _canvas = CanvasRef.value.$el.children[0];
+    const ctx = _canvas.getContext("2d");
+    canvas = _canvas;
+    draw(ctx, _canvas);
+});
+
+const draw = (ctx, canvas) => {
+    const img = new Image();
+    img.crossOrigin = 'Anonymous';
+    img.src = bg;
+    img.onload = function () {
+        ctx.drawImage(img, 0, 0, canvas.width / 3, canvas.height / 3);
+
+        const qr = new UQRCode();
+        qr.data = `${member_url}/pages/register/index?invite=${invite}`;
+        qr.size = 200;
+        qr.margin = 10;
+        qr.make()
+        const QRRefCanvas = QRRef.value.$el.children[0];
+        qr.canvasContext = QRRefCanvas.getContext("2d");
+        qr.drawCanvas().then(() => {
+            const base64 = QRRefCanvas.toDataURL('image/png');
+            const qr_img = new Image();
+            qr_img.src = base64;
+            qr_img.onload = function () {
+                const size = 70;
+                const x = 20;
+                const y = canvas.height / 3 - 88;
+                ctx.drawImage(qr_img, x, y, size, size);
+            }
+        });
+    }
+}
+
+const handleLongPress = () => {
+    emits('handleLongPress', canvas.toDataURL('image/png'));
+}
+</script>
+
+<template>
+    <view class="!size-full relative" @longpress="handleLongPress">
+        <canvas class="!absolute !size-[200px] opacity-0" ref="QRRef"></canvas>
+        <canvas
+            class="!size-full"
+            ref="CanvasRef"/>
+    </view>
+</template>
+
+<style scoped lang="scss">
+
+</style>