poster-example.js
3.27 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
import {
getBindtapData
} from '../../utils/util';
// 二维码
import QR from '../../utils/qrcode'
// 海报
import Poster from '../../plugin/poster/poster/poster';
let app = getApp();
Page({
data: {
authorizeVisible: false,
},
onShareAppMessage() {},
showAuth() {
this.setData({
authorizeVisible: true
})
},
onLoad(options) {},
initData() {
this.initPoster();
this.initQrcode();
},
// 创建海报
initPoster() {
// 获取海报数据
let posterData = this.getPosterConfig();
// 绘制设置海报
this.onCreatePoster(posterData);
},
// 创建二维码
initQrcode() {
createQrCode('wxapp-qrcode', 'qrcode', 300, 300)
},
// ---- START 海报合成 ----
// 详情见: https://github.com/jasondu/wxa-plugin-canvas
// 海报合成成功
onPosterSuccess(e) {
wx.hideLoading();
const {
detail
} = e;
this.setData({
imageUrl: detail
})
},
// 合成失败
onPosterFail(err) {
wx.hideLoading();
console.error(err);
},
// 异步生成海报
onCreatePoster(posterConfig) {
this.setData({
posterConfig: posterConfig
}, () => {
Poster.create(true); // 入参:true为抹掉重新生成
});
},
// 获取海报数据
getPosterConfig() {
let blocks = [{
x: 0,
y: 0,
width: 690,
height: 900,
backgroundColor: "#ffffff",
borderRadius: 10,
}];
let images = [];
let lines = [];
let texts = [{
x: 690 / 2,
y: 192,
width: 690,
fontSize: 36,
color: "#3680EB",
textAlign: "center",
zIndex: 11,
text: "nickname",
}];
let posterData = {
width: 690,
height: 900,
debug: false,
blocks: blocks,
images: images,
lines: lines,
texts: texts,
}
return posterData;
},
// ---- END 海报合成 ----
/**
---------------- 分界线 ----------------
*/
// ---- START 二维码生成 ----
// 详情见: https://github.com/demi520/wxapp-qrcode
// 创建二维码
createQrCode(content, canvasId, cavW, cavH) {
//调用插件中的draw方法,绘制二维码图片
QR.api.draw(content, canvasId, cavW, cavH);
this.canvasToTempImage(canvasId);
},
//获取临时缓存图片路径,存入data中
canvasToTempImage(canvasId) {
let that = this;
wx.canvasToTempFilePath({
canvasId, // 这里canvasId即之前创建的canvas-id
success: function (res) {
let tempFilePath = res.tempFilePath;
console.log(tempFilePath);
that.setData({ // 如果采用mpvue,即 this.imagePath = tempFilePath
qrImagePath: tempFilePath,
});
},
fail: function (res) {
console.log(res);
}
});
},
//适配不同屏幕大小的canvas
setCanvasSize(sz) {
var size = {};
try {
var res = wx.getSystemInfoSync();
var scale = 750 / sz; //不同屏幕下canvas的适配比例;设计稿是750宽
var width = res.windowWidth / scale;
var height = width; //canvas画布为正方形
size.w = width;
size.h = height;
} catch (e) {
// Do something when catch error
console.log("获取设备信息失败" + e);
}
return size;
},
// ---- END 二维码生成 ----
})