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-02-04 18:30:23 +08:00
parent abbae9aede
commit 67c8521b18
78 changed files with 213 additions and 714 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/plugins/index.js
View File

@@ -433,7 +433,7 @@ export function mostValue(arr) {
// 海报生成
export function posterCreate(option, imageArr, textArr, theme, eqcode) {
export function posterCreate(option, imageArr) {
let posterUrl = ''
const { width, height } = option
Toast.loading({
@@ -441,15 +441,14 @@ export function posterCreate(option, imageArr, textArr, theme, eqcode) {
duration: 0,
forbidClick: true
})
console.log('theme', theme);
let mycanvas = document.createElement('canvas') // 创建一个canvas画布元素
let ctx = mycanvas.getContext('2d')
mycanvas.style.width = '750px'; //设置canvas的宽
mycanvas.style.height = '1500px'; //设置canvas的高
mycanvas.style.width = `${width}px`; //设置canvas的宽
mycanvas.style.height = `${height}px`; //设置canvas的高
mycanvas.width = width
mycanvas.height = height
console.log('imgs:', imageArr);
//Promise对象加载资源
let loader_p = [];
imageArr.map((item) => {
@@ -467,48 +466,17 @@ export function posterCreate(option, imageArr, textArr, theme, eqcode) {
Promise.all(loader_p)
.then(imgList => {
// 图片素材遍历绘制
imgList.map((item, index) => {
// console.log('item',imageArr[index]);
if (imageArr[index].name != 'eqcode') {
ctx.drawImage(item, imageArr[index].pos.x, imageArr[index].pos.y, imageArr[index].pos.w, imageArr[index].pos.h); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
}
ctx.drawImage(item, imageArr[index].pos.x, imageArr[index].pos.y, imageArr[index].pos.w, imageArr[index].pos.h); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
})
ctx.rotate(-4.3 * (Math.PI / 180));
// console.log('imgList[2]',imgList[2]);
ctx.drawImage(imgList[2], imageArr[2].pos.x, imageArr[2].pos.y, imageArr[2].pos.w, imageArr[2].pos.h)
// 画签文
// ctx.rotate(-4 * (Math.PI / 180));
ctx.textAlign = 'start'; //type2
ctx.textBaseline = 'top'
textArr.map((item, index) => {
const { x, y } = textArr[index].style.pos
ctx.font = textArr[index].style.font; // normal bold
// title绘制描边
if (index == 0) {
ctx.lineWidth = 5
ctx.strokeStyle = 'white'
ctx.strokeText(textArr[index].content, x, y);
}
ctx.fillStyle = textArr[index].style.color ? textArr[index].style.color : theme; //原生canvas的绘制文字方法,属性类似css，确定好文字颜色、粗细、字号、字体、对齐方式
ctx.fillText(textArr[index].content, x, y); //绘制文字
})
//海报绘制完 ，转成图片对象
return mycanvas.toDataURL('image/jpeg', 1);
})
.then(baseURL => {
//返回的图片地址，就是最后海报的地址，可以放在DOM显示
let posterImg = document.querySelector('#poster')
let posterImg = document.querySelector('#posterSrc')
posterImg.src = baseURL
setTimeout(() => {
Toast.success({ message: '生成成功！' })