diff --git a/src/plugins/index.js b/src/plugins/index.js index a88c00b..be76609 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -431,5 +431,68 @@ export function mostValue(arr) { } +// 海报生成 +export function createPoster(option, arr) { + const { width, height } = option -// export h5plugin; \ No newline at end of file + + 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) => { + 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 + } + + // 画海报 + 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); //绘制文字 + + //海报绘制完 ,转成图片对象 + return mycanvas.toDataURL('image/jpeg', 0.85); + + }) + .then(baseURL => { + + //返回的图片地址,就是最后海报的地址,可以放在DOM显示 + console.log('海报生成完毕 that.posterIsInit'); + that.posterUrl = true; + $('#savePoster').attr('src', baseURL); + + + }) +} \ No newline at end of file