From 3c258cff70caf27c4ca4586322b146973395f7df Mon Sep 17 00:00:00 2001 From: Andy Leong Date: Tue, 16 Jan 2024 11:30:36 +0800 Subject: [PATCH] =?UTF-8?q?=E7=94=9F=E6=88=90=E6=B5=B7=E6=8A=A5=E9=80=BB?= =?UTF-8?q?=E8=BE=91=E5=BE=85=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Result.vue | 127 +++++++++++++++++++++----------------- src/page/Home/App.vue | 2 +- src/plugins/index.js | 56 ++++++++--------- 3 files changed, 98 insertions(+), 87 deletions(-) diff --git a/src/components/Result.vue b/src/components/Result.vue index 13eab54..0117fd7 100644 --- a/src/components/Result.vue +++ b/src/components/Result.vue @@ -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) +} \ No newline at end of file diff --git a/src/page/Home/App.vue b/src/page/Home/App.vue index ea84ced..8a8017e 100644 --- a/src/page/Home/App.vue +++ b/src/page/Home/App.vue @@ -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; diff --git a/src/plugins/index.js b/src/plugins/index.js index a460eba..f79c41d 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -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 }) } \ No newline at end of file