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

生成海报逻辑待完善

Browse Source
This commit is contained in:
Andy Leong 2024-01-16 11:30:36 +08:00
parent da38f8c271
commit 3c258cff70
3 changed files with 98 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
src/components/Result.vue
View File

@ -3,16 +3,17 @@ import { gsap } from "gsap";
import { debounceTap } from "@/plugins"; import { debounceTap } from "@/plugins";
import { useMainStore } from "@/store"; import { useMainStore } from "@/store";
import { mbtiList } from "@/data"; import { mbtiList } from "@/data";
import { posterCreate } from '@/plugins'
// 页面配置初始化 // 页面配置初始化
const emit = defineEmits(["ResultPage"]); const emit = defineEmits(["ResultPage"]);
const userStore = useMainStore(); const userStore = useMainStore();
let bgId = ref(1); let bgId = ref(1);
const bgPic = computed(() => { const bgPic = computed(() => {
return new URL( return new URL(
`../assets/images/result/bg-${bgId.value}.jpg`, `../assets/images/result/bg-${bgId.value}.jpg`,
import.meta.url import.meta.url
).href; ).href;
}); });
const mbti = ref(userStore.MBTI); const mbti = ref(userStore.MBTI);
@ -20,76 +21,90 @@ const mbti = ref(userStore.MBTI);
console.log("mbti", mbti.value); console.log("mbti", mbti.value);
const changBg = (event, number) => { const changBg = (event, number) => {
let e = event.target; let e = event.target;
if (number == bgId.value) return; if (number == bgId.value) return;
bgId.value = number; bgId.value = number;
debounceTap( debounceTap(
e, e,
() => { () => {
console.log("bgId", bgId.value); console.log("bgId", bgId.value);
}, },
0.3 0.3
); );
}; };
const createPoster = (event) => {
let e = event.target
debounceTap(e, () => {
let saveImg = posterCreate(
{ width: 750, height: 1450 },
[
new URL(`@/assets/images/result/bg-2.jpg`, import.meta.url).href,
new URL(`@/assets/images/qa/question.png`, import.meta.url).href,
new URL(`@/assets/images/qa/showResult-btn.png`, import.meta.url).href
]
)
console.log('saveImg', saveImg);
}, 0.4)
}
</script> </script>
<template> <template>
<div class="ResultPage"> <div class="ResultPage">
<div class="result-bg"> <div class="result-bg">
<img :src="bgPic" alt="" srcset="" /> <img :src="bgPic" alt="" srcset="" />
</div> </div>
<div class="result-container"> <div class="result-container">
结果页:{{ mbti || "没结果" }} 结果页:{{ mbti || "没结果" }}
<div class="bg-tab"> <div class="bg-tab">
<div <div :class="{ active: bgId == item }" v-for="item in 4" class="li" @click="changBg($event, item)">
:class="{ active: bgId == item }" {{ item }}
v-for="item in 4" </div>
class="li" </div>
@click="changBg($event, item)" <div @click="createPoster($event)">生成海报</div>
> <div style="width: 500px;height: 700px;">
{{ item }} <img class="pic" src="" alt="" srcset="">
</div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.ResultPage { .ResultPage {
@include fixed(); @include fixed();
background-color: azure; background-color: azure;
.result-bg { .result-bg {
@include pos(750px, 100%, 0px, 50%); @include pos(750px, 100%, 0px, 50%);
transform: translateY(-50%); transform: translateY(-50%);
pointer-events: none; pointer-events: none;
img { img {
@include box(100%, 100%); @include box(100%, 100%);
}
} }
}
.result-container { .result-container {
@include pos(750px, 100%, 0px, 50%); @include pos(750px, 100%, 0px, 50%);
transform: translateY(-50%); transform: translateY(-50%);
.bg-tab { .bg-tab {
width: 90%; width: 90%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
.li { .li {
@include box(80px, 80px); @include box(80px, 80px);
background-color: aquamarine; background-color: aquamarine;
@include flexCen(); @include flexCen();
} }
.active { .active {
background: #bc0000; background: #bc0000;
} }
}
} }
}
} }
</style> </style>

2
src/page/Home/App.vue
View File

@ -66,7 +66,7 @@ const drawFn = (item) => {
} }
}; };
const showResult = ref(false); const showResult = ref(true);
const resultFn = (item) => { const resultFn = (item) => {
if (item.action == "hide") { if (item.action == "hide") {
showResult.value = false; showResult.value = false;

56
src/plugins/index.js
View File

@ -432,67 +432,63 @@ export function mostValue(arr) {
// 海报生成 // 海报生成
export function createPoster(option, arr) { export function posterCreate(option, imageArr) {
const { width, height } = option const { width, height } = option
console.log('createPoster');
/////////////////////////
let mycanvas = document.createElement('canvas'), // 创建一个canvas画布元素 let mycanvas = document.createElement('canvas'), // 创建一个canvas画布元素
ctx = mycanvas.getContext('2d'); ctx = mycanvas.getContext('2d');
mycanvas.width = width; //设置canvas的宽 mycanvas.width = width; //设置canvas的宽
mycanvas.height = height; //设置canvas的高 mycanvas.height = height; //设置canvas的高
const img_src_Arr = [ //需要预加载的资源，比如海报的背景图、二维码、头像等需要用的图像都要先预加载
require('../img/img_' + this.anniversary + '.jpg'), //加载背景图
// this.poster_bg,
]
//Promise对象加载资源 //Promise对象加载资源
let loader_p = []; let loader_p = [];
img_src_Arr.forEach((ev, index) => { imageArr.map((item) => {
const _p = new Promise(resolve => { const _p = new Promise(resolve => {
const img = new Image(); const img = new Image();
img.crossOrigin = 'Anonymous' img.crossOrigin = 'Anonymous'
img.onload = () => { img.onload = () => {
resolve(img) resolve(img)
}; };
img.src = ev; img.src = item;
}); });
loader_p.push(_p); loader_p.push(_p);
}); })
// imageArr.forEach((ev, index) => {
// const _p = new Promise(resolve => {
// const img = new Image();
// img.crossOrigin = 'Anonymous'
// img.onload = () => {
// resolve(img)
// };
// img.src = ev;
// });
// loader_p.push(_p);
// });
//Promise的.all方法，当所有预加载的图像加载好的回调函数 //Promise的.all方法，当所有预加载的图像加载好的回调函数
Promise.all(loader_p) Promise.all(loader_p)
.then(img_Arr => { .then(img_Arr => {
const poster = img_Arr[0]; //声明一个对象替代刚刚加载的资源 const poster = img_Arr[0]; //声明一个对象替代刚刚加载的资源
console.log('======开始绘制海报======)'); console.log('======开始绘制海报======)');
console.log('daihui:', img_Arr);
this.tHeight = 985
if (this.anniversary == 2) {
this.tHeight = 998
}
// 画海报 // 画海报
ctx.drawImage(poster, 0, 0, mycanvas.width, mycanvas.height); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数 ctx.drawImage(poster, 0, 0, mycanvas.width, mycanvas.height); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
// 画签文 // 画签文
ctx.fillStyle = '#524426'; //原生canvas的绘制文字方法,属性类似css，确定好文字颜色、粗细、字号、字体、对齐方式 // ctx.fillStyle = '#524426'; //原生canvas的绘制文字方法,属性类似css，确定好文字颜色、粗细、字号、字体、对齐方式
ctx.font = 'bold 28px arial'; // normal bold // ctx.font = 'bold 28px arial'; // normal bold
ctx.textAlign = 'start'; //type2 // ctx.textAlign = 'start'; //type2
ctx.rotate(-8 * Math.PI / 180); // ctx.rotate(-8 * Math.PI / 180);
ctx.fillText('@' + this.userName, 40, this.tHeight); //绘制文字 // ctx.fillText('@' + this.userName, 40, this.tHeight); //绘制文字
//海报绘制完 ，转成图片对象 //海报绘制完 ，转成图片对象
return mycanvas.toDataURL('image/jpeg', 0.85); return mycanvas.toDataURL('image/jpeg', 1);
}) })
.then(baseURL => { .then(baseURL => {
//返回的图片地址，就是最后海报的地址，可以放在DOM显示 //返回的图片地址，就是最后海报的地址，可以放在DOM显示
console.log('海报生成完毕 that.posterIsInit'); console.log('海报生成完毕 that.posterIsInit', baseURL);
that.posterUrl = true; // let img = document.querySelector('#pic')
$('#savePoster').attr('src', baseURL); // img.src = baseURL
// return baseURL
}) })
} }