liangzejun/palc-newyear2024
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

灯笼选择页面及海报生产

Browse Source
This commit is contained in:
梁泽军
2025-01-15 16:27:44 +08:00
parent cc3a3df9bc
commit c55d13ebeb
43 changed files with 851 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
src/components/Result.vue
View File

@@ -2,7 +2,7 @@
import { gsap } from "gsap";
import { debounceTap } from "@/plugins";
import { useMainStore } from "@/store";
import { posterCreate } from "@/plugins";
import { Toast } from "vant";
import QRCode from "qrcode";
import { reactive } from "vue";
@@ -12,83 +12,92 @@ const emit = defineEmits(["ResultPage"]);
const userStore = useMainStore();
const posterId = ref(userStore.posterId); //海报背景id：1～4
console.log('海报id', posterId.value);
const posterImgList = reactive([
new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
new URL(`../assets/images/result/poster-2.jpg`, import.meta.url).href,
new URL(`../assets/images/result/poster-3.jpg`, import.meta.url).href,
new URL(`../assets/images/result/poster-4.jpg`, import.meta.url).href,
])
// 生成二维码逻辑
const eqcodePic = ref();
onMounted(() => {
console.log('posterId:',posterId.value);
let eqCodeUrl = import.meta.env.VITE_URL;
QRCode.toDataURL(eqCodeUrl)
.then((url) => {
eqcodePic.value = url;
// console.log("eq", eqcodePic.value);
})
.catch((err) => {
console.error(err);
});
onMounted(async () => {
gsap.from(".result-bg", {
// 执行任务队列
await executeTasks();
});
// 这是新加的函数封装异步任务
const executeTasks = async () => {
console.log("二维码生成中...");
// 生成二维码
const eqCodeUrl = import.meta.env.VITE_URL;
eqcodePic.value = await QRCode.toDataURL(eqCodeUrl);
console.log("生成海报中...");
// 生成海报
console.log('pid', posterImgList[posterId.value - 1]);
if (posterImgList[posterId.value - 1] && eqcodePic.value) {
await posterCreate(
{ width: 750, height: 1334 },
[
{ name: "bg", src: posterImgList[posterId.value - 1], pos: { w: 750, h: 1334, x: 0, y: 0 } },
{ name: "eqcode", src: eqcodePic.value, pos: { w: 164, h: 164, x: 159, y: 1122 } },
]
);
}else{
Toast.fail({message:'生成失败'})
emit("ResultPage",{action: 'hide'})
}
};
const showPoster = () => {
gsap.to(".posterPop", {
duration: 0.3,
autoAlpha: 1,
});
gsap.from(".cls-btn-box", {
duration: 0.7,
scale: 1.2,
autoAlpha: 0,
});
gsap.from(".result-larnten-box", {
gsap.from(".poster-box", {
duration: 0.7,
scale: 1.4,
autoAlpha: 0,
});
gsap.from(".result-larnten", {
gsap.from(".save-tips", {
duration: 0.7,
scale: 0.7,
autoAlpha: 0,
});
gsap.from(".result-blessing-1", {
gsap.from(".go-draw", {
duration: 0.7,
y: -30,
autoAlpha: 0,
delay:0.5
delay: 0.5
});
gsap.from(".result-blessing-2", {
gsap.from(".go-share", {
duration: 0.7,
y: -30,
autoAlpha: 0,
delay:0.7
delay: 0.7
});
gsap.from(".result-product", {
duration: 0.7,
y: -30,
autoAlpha: 0,
delay:1
});
gsap.from(".result-tips", {
duration: 0.7,
y: -30,
autoAlpha: 0,
delay:1.2
});
gsap.from(".create-poster", {
duration: 0.7,
y: -30,
autoAlpha: 0,
delay:1.4,
onComplete:()=>{
// gsap.to('.result-larnten',{duration:5,transformOrigin:'50% 0%',rotation:'10deg',repeat:-1,yoyo:true,ease:'none'})
let gl = gsap.timeline({repeat:-1,yoyo:true})
gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'3deg',ease:'none'})
gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'0deg',ease:'none'})
gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'-3deg',ease:'none'})
// gsap.fo('.result-larnten',{duration:5,transformOrigin:'50% 0%',rotation:'10deg',repeat:-1,yoyo:true,ease:'none'})
}
});
});
}
// 生成海报逻辑
const createPoster = (event) => {
@@ -102,10 +111,10 @@ const createPoster = (event) => {
// 背景
{
name: "bg",
src: posterImgList[posterId.value-1],
src: posterImgList[posterId.value - 1],
pos: { w: 750, h: 1334, x: 0, y: 0 },
},
// 二维码
// 二维码
{
name: "eqcode",
src: eqcodePic.value,
@@ -115,7 +124,7 @@ const createPoster = (event) => {
);
// gsap.to('.posterPop',{duration:0.5,autoAlpha:1})
});
};
@@ -135,7 +144,12 @@ const goDraw = (event) => {
const hidePop = (event) => {
let e = event.target;
debounceTap(e, () => {
gsap.to(".posterPop", { duration: 0.5, autoAlpha: 0 });
gsap.to(".posterPop", {
duration: 0.5, autoAlpha: 0,
onComplete: () => {
emit('ResultPage', { action: 'hide' })
}
});
});
};
@@ -151,32 +165,87 @@ const goShare = (event) => {
const hideShare = () => {
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
};
// 海报生成
const posterCreate = (option, imageArr) => {
let posterUrl = ''
const { width, height } = option
Toast.loading({
message: '海报生成中',
duration: 0,
forbidClick: true
})
let mycanvas = document.createElement('canvas') // 创建一个canvas画布元素
let ctx = mycanvas.getContext('2d')
mycanvas.style.width = `${width}px`; //设置canvas的宽
mycanvas.style.height = `${height}px`; //设置canvas的高
mycanvas.width = width
mycanvas.height = height
//Promise对象加载资源
let loader_p = [];
imageArr.map((item) => {
const _p = new Promise(resolve => {
const img = new Image();
img.crossOrigin = 'Anonymous'
img.onload = () => {
resolve(img)
};
img.src = item.src;
});
loader_p.push(_p);
})
//Promise的.all方法，当所有预加载的图像加载好的回调函数
Promise.all(loader_p)
.then(imgList => {
// 图片素材遍历绘制
imgList.map((item, index) => {
ctx.drawImage(item, imageArr[index].pos.x, imageArr[index].pos.y, imageArr[index].pos.w, imageArr[index].pos.h); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
})
//海报绘制完 ，转成图片对象
return mycanvas.toDataURL('image/jpeg', 1);
})
.then(baseURL => {
//返回的图片地址，就是最后海报的地址，可以放在DOM显示
let posterImg = document.querySelector('#posterSrc')
posterImg.src = baseURL
setTimeout(() => {
// 展示海报
showPoster();
Toast.success({ message: '生成成功！' })
}, 500)
})
.catch(error => {
console.error("生成海报失败");
gsap.to(".posterPop", {
duration: 0.5,
autoAlpha: 0,
onComplete: () => {
emit('ResultPage', { action: 'hide' })
}
});
Toast.fail({ message: '生成失败，请重试！' });
});
// return posterUrl
}
</script>
<template>
<div class="ResultPage" @touchmove.prevent>
<div class="result-bg"></div>
<div class="result-container">
<div class="result-larnten-box" :class="'larnten-box-'+posterId"></div>
<div class="result-larnten" :class="'larnten-'+posterId"></div>
<!-- 新年祝福语 -->
<div class="result-blessing-1" :class="'blessing-'+posterId+'-1'"></div>
<div class="result-blessing-2" :class="'blessing-'+posterId+'-2'"></div>
<!-- 产品 -->
<div class="result-product" :class="'product-'+posterId"></div>
<!-- 提示语 -->
<div class="result-tips"></div>
<!-- 生成海报按钮 -->
<div class="create-poster" @click="createPoster($event)"></div>
</div>
</div>
<!-- 海报弹窗 -->
<div class="posterPop" @touchmove.prevent>
<div class="cls-btn-box">
<div class="cls-btn" @click="hidePop($event)"></div>
</div>
<div class="poster-box">
<div class="poster" :class="'poster-'+posterId">
<div class="poster" :class="'poster-' + posterId">
<img id="posterSrc" src="" alt="" srcset="">
</div>
</div>
@@ -191,100 +260,107 @@ const hideShare = () => {
<div class="tips-pic"></div>
<div class="tips-text">点击右上角分享给你的好友！</div>
</div>
</template>
</template>
<style lang="scss" scoped>
.ResultPage {
@include fixed();
background-color: azure;
visibility: hidden;
.result-bg {
@include pos(750px, 1624px, 0px, 50%);
@include bg_pos("result/bg.jpg");
transform: translateY(-50%);
pointer-events: none;
background-color: rgba($color: #000000, $alpha: 0.6);
}
.result-container {
@include pos(750px, 1624px, 0px, 50%);
transform: translateY(-50%);
.larnten-box-1{
.larnten-box-1 {
@include pos(437px, 809px, 283px, 181px);
@include bg_pos("result/larnten-box-1.png");
}
.larnten-box-2{
.larnten-box-2 {
@include pos(423px, 790px, 304px, 178px);
@include bg_pos("result/larnten-box-2.png");
}
.larnten-box-3{
.larnten-box-3 {
@include pos(447px, 807px, 280px, 170px);
@include bg_pos("result/larnten-box-3.png");
}
.larnten-1{
.larnten-1 {
@include pos(397px, 787px, 315px, 297px);
@include bg_pos("result/larnten-1.png");
}
.larnten-2{
.larnten-2 {
@include pos(444px, 771px, 306px, 302px);
@include bg_pos("result/larnten-2.png");
}
.larnten-3{
.larnten-3 {
@include pos(472px, 789px, 278px, 285px);
@include bg_pos("result/larnten-3.png");
}
.blessing-1-1{
.blessing-1-1 {
@include pos(86px, 565px, 70px, 347px);
@include bg_pos("result/blessing-text-1-1.png");
}
.blessing-1-2{
.blessing-1-2 {
@include pos(82px, 561px, 165px, 347px);
@include bg_pos("result/blessing-text-1-2.png");
}
.blessing-2-1{
.blessing-2-1 {
@include pos(86px, 563px, 70px, 347px);
@include bg_pos("result/blessing-text-2-1.png");
}
.blessing-2-2{
.blessing-2-2 {
@include pos(88px, 565px, 165px, 347px);
@include bg_pos("result/blessing-text-2-2.png");
}
.blessing-3-1{
.blessing-3-1 {
@include pos(86px, 568px, 70px, 347px);
@include bg_pos("result/blessing-text-3-1.png");
}
.blessing-3-2{
.blessing-3-2 {
@include pos(87px, 563px, 165px, 347px);
@include bg_pos("result/blessing-text-3-2.png");
}
.result-product{
.result-product {
@include pos(619px, 138px, 65px, 1015px);
}
.product-1{
.product-1 {
@include bg_pos("result/product-1.png");
}
.product-2{
.product-2 {
@include bg_pos("result/product-2.png");
}
.product-3{
.product-3 {
@include bg_pos("result/product-3.png");
}
.result-tips{
.result-tips {
@include pos(645px, 71px, 52px, 1183px);
@include bg_pos("result/text.png");
}
.create-poster{
.create-poster {
@include pos(237px, 80px, 257px, 1284px);
@include bg_pos("result/create-btn.png");
}
@@ -326,18 +402,22 @@ const hideShare = () => {
.poster {
@include box(100%, 100%);
overflow: hidden;
#posterSrc{
#posterSrc {
@include box(100%, 100%);
opacity: 0;
}
}
.poster-1{
.poster-1 {
@include bg_pos("result/preveiw-1.png");
}
.poster-2{
.poster-2 {
@include bg_pos("result/preveiw-2.png");
}
.poster-3{
.poster-3 {
@include bg_pos("result/preveiw-3.png");
}
}