小程序海报生成器

canvas生成

<canvas canvas-id='canvas_poster' class='wx-poster'></canvas>

1.     let that = this;
2.     wx.showToast({
3.       title: '海报生成中...',
4.       icon: 'loading',
5.       duration: 2000
6.     });
7.     const ctx = wx.createCanvasContext('canvas_poster');
8.     ctx.clearRect(0, 0, 0, 0);
9.     //  绘制图片模板的 底图
10.     ctx.drawImage('/image/poster_bg.jpg', 0, 0, 270, 314);
11.     //  绘制顶部banner
12.     ctx.drawImage(that.data.banner, 0, 0, 270, 154);
13.    //绘制视频名称
14.     ctx.setTextAlign('left')
15.     ctx.setFontSize(14);
16.     ctx.fillText(`${that.data.item.videoName}`, 9, 173);
17.    //绘制横线
18.     ctx.moveTo(0, 188)
19.     ctx.lineTo(270, 188);
20.     ctx.setLineWidth(1)
21.     ctx.setStrokeStyle('rgb(239,239,239)')
22.     ctx.stroke();
23.     ctx.moveTo(0, 236)
24.     ctx.lineTo(270, 236);
25.     ctx.setLineWidth(1)
26.     ctx.setStrokeStyle('rgb(239,239,239)')
27.     ctx.stroke()
28.     //绘制头像
29.     ctx.save();
30.     ctx.beginPath();
31.     let r = 13;
32.     let d = r * 2;
33.     let cx = 9;
34.     let cy = 194;
35.     ctx.arc(cx+r, cy + r, r, 0, 2 * Math.PI);
36.     ctx.closePath();
37.     ctx.clip();
38.     ctx.drawImage(that.data.headerImg, cx, cy, d, d);
39.     ctx.restore();
40.    //绘制昵称时间
41.     ctx.setTextAlign('left')
42.     ctx.setFontSize(12);
43.      ctx.setFillStyle('rgb(30,30,52)')
44.      ctx.fillText(`${that.data.item.name}`, 45, 204);
45.     ctx.setFontSize(12);
46.     ctx.setFillStyle('rgb(200,200,200)')
47.     ctx.fillText(`${that.data.item.time}`, 45, 222);
48.     //  绘制小程序码
49.     ctx.drawImage(that.data.wxcodePic, 18, 240, 71, 71);
50.     //  绘制二维码右边说明
51.     ctx.setTextAlign('left')
52.     ctx.setFontSize(14);
53.     ctx.setFillStyle('rgb(255,131,56)')
54.     ctx.fillText(`${that.data.item.MicroName}`, 100, 264);
55.     ctx.setFontSize(14);
56.     ctx.setFillStyle('rgb(51,51,51)')
57.     ctx.fillText('长按识别小程序码访问', 100, 290);
58.     ctx.draw();

    //生成海报的封面图缓存到本地

1.   getbanner(url, that) {    //  图片缓存本地的方法
2.     if (typeof url === 'string') {
3.       wx.getImageInfo({   //  小程序获取图片信息API
4.         src: url,
5.         success: function (res) {
6.           that.setData({
7.             banner: res.path
8.           })
9.         },
10.         fail(err) {
11.           console.log(err)
12.         }
13.       })
14.     }
15.   },

 //保存图片至相册

1.   savePoster:function(e){
2.     setTimeout(function () {
3.       wx.canvasToTempFilePath({
4.         x: 0,
5.         y: 0,
6.         width: 270,
7.         height: 314,
8.         destWidth: 810,
9.         destHeight: 942,
10.         quality:1,
11.         canvasId: 'canvas_poster',
12.         fileType: 'png',
13.         success: function (res) {
14.           wx.saveImageToPhotosAlbum({
15.             filePath: res.tempFilePath,
16.             success(res) {
17.               wx.hideLoading();
18.               wx.showToast({
19.                 title: '保存成功',
20.               });
21.             },
22.             fail() {
23.               wx.hideLoading()
24.             }
25.           })
26.         }
27.       })
28.     }, 500);
29.   }