|
@@ -7,9 +7,14 @@ const defaultOptions = () => ({
|
|
|
bgImageUrl: 'https://static.caimei365.com/app/mini-hehe/icon/bg-share-01.png',
|
|
|
userBg: 'https://static.caimei365.com/app/img/icon/bg-card.png',
|
|
|
userTitleBg: 'https://static.caimei365.com/app/img/icon/logo-fanbai.png',
|
|
|
- ewmUrl: 'https://static.caimei365.com/app/mini-hehe/icon/icon-ewm-hehe.jpg',
|
|
|
+ // ewmUrl: 'https://static.caimei365.com/app/mini-hehe/icon/icon-ewm-hehe.jpg',
|
|
|
textArray: [],
|
|
|
scale: 0.5,
|
|
|
+ duty: {
|
|
|
+ text: '客户经理',
|
|
|
+ bgColor: '#FFBB00',
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
})
|
|
|
// 绘制海报
|
|
|
export default class DrawPoster {
|
|
@@ -91,13 +96,14 @@ export default class DrawPoster {
|
|
|
// 绘制名片封面
|
|
|
async drawUserCoverImage() {
|
|
|
try {
|
|
|
- const { userBg, scale, image, qrCode, linkMan, contractMobile } = this.options
|
|
|
+ const { userBg, scale, image, qrCode, linkMan, contractMobile, duty } = this.options
|
|
|
await this.drawBorderReduisImage(userBg, 28 * scale, 920 * scale, 694 * scale, 290 * scale, 8)
|
|
|
await this.drawUserCardInner() // 绘制名片内容
|
|
|
await this.drawCircleImg(image, 120 * scale, 1090 * scale, 30) //头像
|
|
|
- this.drawFontText(40 * scale, 200 * scale, 1070 * scale, '#fff', linkMan, 'bold')
|
|
|
+ this.drawFontText(30 * scale, 200 * scale, 1070 * scale, '#fff', linkMan, 'bold', true)
|
|
|
this.drawFontText(30 * scale, 200 * scale, 1130 * scale, '#fff', contractMobile, '400')
|
|
|
- await this.drawBorderReduisImage(qrCode, 520 * scale, 1000 * scale, 170 * scale, 170 * scale, 8)
|
|
|
+ await this.drawBorderReduisImage(qrCode, 550 * scale, 980 * scale, 150 * scale, 150 * scale, 6)
|
|
|
+ this.drawFontText(20 * scale, 550 * scale, 1160 * scale, '#fff', ['长按或扫二维码', '——联系我——'], '400')
|
|
|
return Promise.resolve(true)
|
|
|
} catch (e) {
|
|
|
return Promise.reject(e)
|
|
@@ -141,11 +147,24 @@ export default class DrawPoster {
|
|
|
this.ctx.restore()
|
|
|
}
|
|
|
// 绘制文字
|
|
|
- drawFontText(fontsize, x, y, color, text, bold) {
|
|
|
+ drawFontText(fontsize, x, y, color, text, bold, isDuty = false) {
|
|
|
this.ctx.beginPath()
|
|
|
this.ctx.font = `${bold} ${fontsize}px sans-serif`
|
|
|
this.ctx.setFillStyle(color)
|
|
|
- this.ctx.fillText(text, x, y)
|
|
|
+ if (Array.isArray(text)) {
|
|
|
+ text.forEach((e, i) => {
|
|
|
+ this.ctx.fillText(e, x, y + fontsize * i)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.ctx.fillText(text, x, y)
|
|
|
+ if (isDuty) {
|
|
|
+ this.ctx.fillStyle = `${this.options.duty.bgColor}`
|
|
|
+ this.ctx.fillRect(x + (text.length * fontsize)- 30, y-fontsize, 66, fontsize + 4)
|
|
|
+ this.ctx.font = `${400} ${fontsize}px sans-serif`
|
|
|
+ this.ctx.setFillStyle('#fff')
|
|
|
+ this.ctx.fillText(this.options.duty.text, x + (text.length * fontsize) -30, y)
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
// 绘制底部
|
|
|
drawFooterText(callback) {
|
|
@@ -166,7 +185,7 @@ export default class DrawPoster {
|
|
|
const { ewmUrl, scale } = this.options
|
|
|
const [error, result] = await uni.downloadFile({ url: ewmUrl })
|
|
|
if (error) return
|
|
|
- this.ctx.drawImage(result.tempFilePath, 524 * scale, 720 * scale, 160 * scale, 160 * scale)
|
|
|
+ this.ctx.drawImage(result.tempFilePath, 524 * scale, 730 * scale, 160 * scale, 160 * scale)
|
|
|
return Promise.resolve(true)
|
|
|
} catch (e) {
|
|
|
return Promise.reject(e)
|