生成海报逻辑待完善
This commit is contained in:
Andy Leong
parent
da38f8c271
commit
3c258cff70
@ -3,16 +3,17 @@ import { gsap } from "gsap";
|
||||
import { debounceTap } from "@/plugins";
|
||||
import { useMainStore } from "@/store";
|
||||
import { mbtiList } from "@/data";
|
||||
import { posterCreate } from '@/plugins'
|
||||
|
||||
// 页面配置初始化
|
||||
const emit = defineEmits(["ResultPage"]);
|
||||
const userStore = useMainStore();
|
||||
let bgId = ref(1);
|
||||
const bgPic = computed(() => {
|
||||
return new URL(
|
||||
`../assets/images/result/bg-${bgId.value}.jpg`,
|
||||
import.meta.url
|
||||
).href;
|
||||
return new URL(
|
||||
`../assets/images/result/bg-${bgId.value}.jpg`,
|
||||
import.meta.url
|
||||
).href;
|
||||
});
|
||||
|
||||
const mbti = ref(userStore.MBTI);
|
||||
@ -20,76 +21,90 @@ const mbti = ref(userStore.MBTI);
|
||||
console.log("mbti", mbti.value);
|
||||
|
||||
const changBg = (event, number) => {
|
||||
let e = event.target;
|
||||
if (number == bgId.value) return;
|
||||
bgId.value = number;
|
||||
debounceTap(
|
||||
e,
|
||||
() => {
|
||||
console.log("bgId", bgId.value);
|
||||
},
|
||||
0.3
|
||||
);
|
||||
let e = event.target;
|
||||
if (number == bgId.value) return;
|
||||
bgId.value = number;
|
||||
debounceTap(
|
||||
e,
|
||||
() => {
|
||||
console.log("bgId", bgId.value);
|
||||
},
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div class="ResultPage">
|
||||
<div class="result-bg">
|
||||
<img :src="bgPic" alt="" srcset="" />
|
||||
</div>
|
||||
<div class="result-container">
|
||||
结果页:{{ mbti || "没结果" }}
|
||||
<div class="bg-tab">
|
||||
<div
|
||||
:class="{ active: bgId == item }"
|
||||
v-for="item in 4"
|
||||
class="li"
|
||||
@click="changBg($event, item)"
|
||||
>
|
||||
{{ item }}
|
||||
<div class="ResultPage">
|
||||
<div class="result-bg">
|
||||
<img :src="bgPic" alt="" srcset="" />
|
||||
</div>
|
||||
<div class="result-container">
|
||||
结果页:{{ mbti || "没结果" }}
|
||||
<div class="bg-tab">
|
||||
<div :class="{ active: bgId == item }" v-for="item in 4" class="li" @click="changBg($event, item)">
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div @click="createPoster($event)">生成海报</div>
|
||||
<div style="width: 500px;height: 700px;">
|
||||
<img class="pic" src="" alt="" srcset="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ResultPage {
|
||||
@include fixed();
|
||||
background-color: azure;
|
||||
@include fixed();
|
||||
background-color: azure;
|
||||
|
||||
.result-bg {
|
||||
@include pos(750px, 100%, 0px, 50%);
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
.result-bg {
|
||||
@include pos(750px, 100%, 0px, 50%);
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
|
||||
img {
|
||||
@include box(100%, 100%);
|
||||
img {
|
||||
@include box(100%, 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.result-container {
|
||||
@include pos(750px, 100%, 0px, 50%);
|
||||
transform: translateY(-50%);
|
||||
.result-container {
|
||||
@include pos(750px, 100%, 0px, 50%);
|
||||
transform: translateY(-50%);
|
||||
|
||||
.bg-tab {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
.bg-tab {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
|
||||
.li {
|
||||
@include box(80px, 80px);
|
||||
background-color: aquamarine;
|
||||
@include flexCen();
|
||||
}
|
||||
.li {
|
||||
@include box(80px, 80px);
|
||||
background-color: aquamarine;
|
||||
@include flexCen();
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #bc0000;
|
||||
}
|
||||
.active {
|
||||
background: #bc0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -66,7 +66,7 @@ const drawFn = (item) => {
|
||||
}
|
||||
};
|
||||
|
||||
const showResult = ref(false);
|
||||
const showResult = ref(true);
|
||||
const resultFn = (item) => {
|
||||
if (item.action == "hide") {
|
||||
showResult.value = false;
|
||||
|
||||
@ -432,67 +432,63 @@ export function mostValue(arr) {
|
||||
|
||||
|
||||
// 海报生成
|
||||
export function createPoster(option, arr) {
|
||||
export function posterCreate(option, imageArr) {
|
||||
const { width, height } = option
|
||||
|
||||
|
||||
console.log('createPoster');
|
||||
/////////////////////////
|
||||
let mycanvas = document.createElement('canvas'), // 创建一个canvas画布元素
|
||||
ctx = mycanvas.getContext('2d');
|
||||
mycanvas.width = width; //设置canvas的宽
|
||||
mycanvas.height = height; //设置canvas的高
|
||||
|
||||
const img_src_Arr = [ //需要预加载的资源，比如海报的背景图、二维码、头像等需要用的图像都要先预加载
|
||||
require('../img/img_' + this.anniversary + '.jpg'), //加载背景图
|
||||
// this.poster_bg,
|
||||
]
|
||||
//Promise对象加载资源
|
||||
let loader_p = [];
|
||||
img_src_Arr.forEach((ev, index) => {
|
||||
imageArr.map((item) => {
|
||||
const _p = new Promise(resolve => {
|
||||
const img = new Image();
|
||||
img.crossOrigin = 'Anonymous'
|
||||
img.onload = () => {
|
||||
resolve(img)
|
||||
|
||||
};
|
||||
img.src = ev;
|
||||
img.src = item;
|
||||
});
|
||||
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(loader_p)
|
||||
.then(img_Arr => {
|
||||
const poster = img_Arr[0]; //声明一个对象替代刚刚加载的资源
|
||||
console.log('======开始绘制海报======)');
|
||||
|
||||
this.tHeight = 985
|
||||
if (this.anniversary == 2) {
|
||||
this.tHeight = 998
|
||||
}
|
||||
|
||||
console.log('daihui:', img_Arr);
|
||||
// 画海报
|
||||
ctx.drawImage(poster, 0, 0, mycanvas.width, mycanvas.height); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
|
||||
// 画签文
|
||||
ctx.fillStyle = '#524426'; //原生canvas的绘制文字方法,属性类似css，确定好文字颜色、粗细、字号、字体、对齐方式
|
||||
ctx.font = 'bold 28px arial'; // normal bold
|
||||
ctx.textAlign = 'start'; //type2
|
||||
ctx.rotate(-8 * Math.PI / 180);
|
||||
ctx.fillText('@' + this.userName, 40, this.tHeight); //绘制文字
|
||||
// ctx.fillStyle = '#524426'; //原生canvas的绘制文字方法,属性类似css，确定好文字颜色、粗细、字号、字体、对齐方式
|
||||
// ctx.font = 'bold 28px arial'; // normal bold
|
||||
// ctx.textAlign = 'start'; //type2
|
||||
// ctx.rotate(-8 * Math.PI / 180);
|
||||
// ctx.fillText('@' + this.userName, 40, this.tHeight); //绘制文字
|
||||
|
||||
//海报绘制完 ，转成图片对象
|
||||
return mycanvas.toDataURL('image/jpeg', 0.85);
|
||||
return mycanvas.toDataURL('image/jpeg', 1);
|
||||
|
||||
})
|
||||
.then(baseURL => {
|
||||
|
||||
//返回的图片地址，就是最后海报的地址，可以放在DOM显示
|
||||
console.log('海报生成完毕 that.posterIsInit');
|
||||
that.posterUrl = true;
|
||||
$('#savePoster').attr('src', baseURL);
|
||||
|
||||
|
||||
console.log('海报生成完毕 that.posterIsInit', baseURL);
|
||||
// let img = document.querySelector('#pic')
|
||||
// img.src = baseURL
|
||||
// return baseURL
|
||||
})
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user