update
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import UQRCode from 'uqrcodejs';
|
import UQRCode from 'uqrcodejs';
|
||||||
import {onMounted, ref} from 'vue';
|
import {onMounted, ref, onUnmounted} from 'vue';
|
||||||
|
|
||||||
const emits = defineEmits(['handleLongPress']);
|
const emits = defineEmits(['handleLongPress']);
|
||||||
const {bg, invite, member_url} = defineProps({
|
const {bg, invite, member_url} = defineProps({
|
||||||
@@ -25,13 +25,22 @@ const itemList = [
|
|||||||
const CanvasRef = ref();
|
const CanvasRef = ref();
|
||||||
const QRRef = ref();
|
const QRRef = ref();
|
||||||
let canvas = null;
|
let canvas = null;
|
||||||
|
let timer = null;
|
||||||
|
const imageSrc = ref(null);
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const _canvas = CanvasRef.value.$el.children[0];
|
const _canvas = CanvasRef.value.$el.children[0];
|
||||||
const ctx = _canvas.getContext("2d");
|
const ctx = _canvas.getContext("2d");
|
||||||
canvas = _canvas;
|
canvas = _canvas;
|
||||||
draw(ctx, _canvas);
|
draw(ctx, _canvas);
|
||||||
|
timer = setInterval(() => {
|
||||||
|
imageSrc.value = canvas.toDataURL('image/png')
|
||||||
|
}, 1000)
|
||||||
});
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer);
|
||||||
|
})
|
||||||
|
|
||||||
const draw = (ctx, canvas) => {
|
const draw = (ctx, canvas) => {
|
||||||
const img = new Image();
|
const img = new Image();
|
||||||
img.crossOrigin = 'Anonymous';
|
img.crossOrigin = 'Anonymous';
|
||||||
@@ -59,18 +68,15 @@ const draw = (ctx, canvas) => {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleLongPress = () => {
|
|
||||||
emits('handleLongPress', canvas.toDataURL('image/png'));
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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="!absolute !size-[200px] opacity-0" ref="QRRef"></canvas>
|
||||||
<canvas
|
<canvas
|
||||||
class="!size-full"
|
class="!size-full"
|
||||||
ref="CanvasRef"/>
|
ref="CanvasRef"/>
|
||||||
|
<image class="!size-full !absolute z-50 left-0 top-0 test" :src="imageSrc"></image>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import yqhyBg from '../../static/icons/yqhy-bg.png';
|
|||||||
import XNav from "../../components/XNav.vue";
|
import XNav from "../../components/XNav.vue";
|
||||||
import Api from "../../api/index.js";
|
import Api from "../../api/index.js";
|
||||||
import Poster from "./Poster.vue";
|
import Poster from "./Poster.vue";
|
||||||
|
import {download} from "../../utils/uils.js";
|
||||||
|
|
||||||
const swiperCur = ref(0);
|
const swiperCur = ref(0);
|
||||||
const showActionSheet = ref(false);
|
const showActionSheet = ref(false);
|
||||||
@@ -39,12 +40,7 @@ const handleLongPress = (base64) => {
|
|||||||
|
|
||||||
const success = ({type}) => {
|
const success = ({type}) => {
|
||||||
if (type === 1) {
|
if (type === 1) {
|
||||||
const link = document.createElement('a');
|
download(nowActive);
|
||||||
link.href = nowActive;
|
|
||||||
link.download = '邀请海报.png';
|
|
||||||
document.body.appendChild(link);
|
|
||||||
link.click();
|
|
||||||
document.body.removeChild(link);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user