|
@@ -1,13 +1,13 @@
|
|
|
// 默认配置参数
|
|
|
const defaultOptions = () => ({
|
|
|
- avatarUrl: 'https://static.caimei365.com/app/mini-hehe/icon/icon-join-us.png',
|
|
|
+ avatarUrl: '',
|
|
|
userName: '采美',
|
|
|
subTitle: '强烈为你推荐该商城',
|
|
|
- coverUrl: 'https://static.caimei365.com/app/mini-hehe/icon/icon-share.png',
|
|
|
- bgImageUrl: 'https://static.caimei365.com/app/mini-hehe/icon/bg-share-01.png',
|
|
|
+ coverUrl: '',
|
|
|
+ bgImageUrl: 'https://static.caimei365.com/app/img/icon/bgImage.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: '',
|
|
|
textArray: [],
|
|
|
scale: 0.5,
|
|
|
duty: {
|
|
@@ -21,14 +21,12 @@ export default class DrawPoster {
|
|
|
constructor(ctx, options = {}) {
|
|
|
this.ctx = ctx
|
|
|
this.options = Object.assign(defaultOptions(), options)
|
|
|
- console.log('配置信息为:', this.options)
|
|
|
}
|
|
|
// 开始绘制
|
|
|
draw() {
|
|
|
return new Promise(async (resolve, reject) => {
|
|
|
try {
|
|
|
await this.drawBgImage()
|
|
|
- // await this.drawHeader()
|
|
|
await this.drawUserCoverImage()
|
|
|
await this.drawCenterInfo()
|
|
|
} catch (e) {
|
|
@@ -47,7 +45,7 @@ export default class DrawPoster {
|
|
|
const { bgImageUrl, scale } = this.options
|
|
|
const [error, result] = await uni.downloadFile({ url: bgImageUrl })
|
|
|
if (error) return
|
|
|
- this.ctx.setFillStyle('#999999')
|
|
|
+ this.ctx.drawImage(result.tempFilePath, 0, 0, 750 * scale, 1240 * scale)
|
|
|
this.ctx.save()
|
|
|
return Promise.resolve(true)
|
|
|
} catch (e) {
|
|
@@ -55,27 +53,27 @@ export default class DrawPoster {
|
|
|
}
|
|
|
}
|
|
|
// 绘制圆角矩形
|
|
|
- async drawRoundRect(x, y, w, h, r) {
|
|
|
+ drawRoundRect(x, y, w, h, r, color) {
|
|
|
+ this.ctx.save()
|
|
|
this.ctx.beginPath()
|
|
|
this.ctx.moveTo(x + r , y)
|
|
|
this.ctx.arcTo(x + w, y, x + w, y + h, r)
|
|
|
this.ctx.arcTo(x + w, y + h, x , y + h, r)
|
|
|
this.ctx.arcTo(x, y + h, x, y, r)
|
|
|
this.ctx.arcTo(x, y, x + w, y , r)
|
|
|
- this.ctx.setFillStyle('#FFFFFF')
|
|
|
+ this.ctx.setFillStyle(color)
|
|
|
this.ctx.fill()
|
|
|
- this.ctx.clip()
|
|
|
+ // this.ctx.clip()
|
|
|
}
|
|
|
// 绘制中心区域
|
|
|
async drawCenterInfo() {
|
|
|
try {
|
|
|
- const { scale } = this.options
|
|
|
-
|
|
|
+ const { scale, coverUrl, ewmUrl } = this.options
|
|
|
this.ctx.beginPath()
|
|
|
- this.drawRoundRect(28 * scale, 28 * scale, 694 * scale, 878 * scale, 8)
|
|
|
- await this.drawCoverImage()
|
|
|
+ await this.drawRoundRect(28 * scale, 28 * scale, 694 * scale, 878 * scale, 8, '#FFFFFF')
|
|
|
await this.drawFooterText()
|
|
|
- await this.drawEwmImage()
|
|
|
+ this.ctx.drawImage(coverUrl, 56 * scale, 56 * scale, 638 * scale, 658 * scale)
|
|
|
+ this.ctx.drawImage(ewmUrl, 524 * scale, 730 * scale, 160 * scale, 160 * scale)
|
|
|
return Promise.resolve(true)
|
|
|
} catch (e) {
|
|
|
return Promise.reject(e)
|
|
@@ -84,13 +82,13 @@ export default class DrawPoster {
|
|
|
// 绘制封面图片
|
|
|
async drawCoverImage() {
|
|
|
try {
|
|
|
+ this.ctx.beginPath()
|
|
|
const { coverUrl, scale } = this.options
|
|
|
- const [error, result] = await uni.downloadFile({ url: coverUrl })
|
|
|
- if (error) return
|
|
|
- this.ctx.drawImage(result.tempFilePath, 56 * scale, 56 * scale, 638 * scale, 658 * scale)
|
|
|
+ this.ctx.drawImage(coverUrl, 56 * scale, 56 * scale, 638 * scale, 658 * scale)
|
|
|
+ this.ctx.save()
|
|
|
return Promise.resolve(true)
|
|
|
} catch (e) {
|
|
|
- return Promise.reject(e)
|
|
|
+ console.log(e)
|
|
|
}
|
|
|
}
|
|
|
// 绘制名片封面
|
|
@@ -100,10 +98,10 @@ export default class DrawPoster {
|
|
|
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(30 * scale, 200 * scale, 1070 * scale, '#fff', linkMan, 'bold', true)
|
|
|
+ this.drawFontText(36 * scale, 200 * scale, 1070 * scale, '#fff', linkMan, 'bold', true)
|
|
|
this.drawFontText(30 * scale, 200 * scale, 1130 * scale, '#fff', contractMobile, '400')
|
|
|
- await this.drawBorderReduisImage(qrCode, 550 * scale, 980 * scale, 150 * scale, 150 * scale, 6)
|
|
|
- this.drawFontText(20 * scale, 550 * scale, 1160 * scale, '#fff', ['长按或扫二维码', '——联系我——'], '400')
|
|
|
+ await this.drawBorderReduisImage(qrCode, 556 * scale, 1010 * scale, 120 * scale, 120 * scale, 6)
|
|
|
+ this.drawFontText(18 * scale, 550 * scale, 1160 * scale, '#fff', ['长按或扫二维码', '——联系我——'], '400')
|
|
|
return Promise.resolve(true)
|
|
|
} catch (e) {
|
|
|
return Promise.reject(e)
|
|
@@ -122,7 +120,6 @@ export default class DrawPoster {
|
|
|
}
|
|
|
async drawCircleImg(img, x, y, r) {
|
|
|
const [error, result] = await uni.downloadFile({ url: img })
|
|
|
- console.log('result', result, x, y, r)
|
|
|
if (error) return
|
|
|
this.ctx.save()
|
|
|
this.ctx.beginPath()
|
|
@@ -130,7 +127,6 @@ export default class DrawPoster {
|
|
|
this.ctx.arc(x, y, r, 0, 2 * Math.PI)
|
|
|
this.ctx.clip()
|
|
|
this.ctx.drawImage(result.tempFilePath, x - r, y - r, size, size)
|
|
|
- console.log('x - r, y - r, size, size', x - r, y - r, size, size)
|
|
|
this.ctx.restore()
|
|
|
}
|
|
|
async drawBorderReduisImage(imgUrl, bg_x, bg_y, bg_w, bg_h, bg_r) {
|
|
@@ -147,28 +143,34 @@ export default class DrawPoster {
|
|
|
this.ctx.restore()
|
|
|
}
|
|
|
// 绘制文字
|
|
|
- drawFontText(fontsize, x, y, color, text, bold, isDuty = false) {
|
|
|
- this.ctx.beginPath()
|
|
|
- this.ctx.font = `${bold} ${fontsize}px sans-serif`
|
|
|
- this.ctx.setFillStyle(color)
|
|
|
+ async drawFontText(fontsize, x, y, color, text, bold, isDuty = false) {
|
|
|
+ this.ctx.save()
|
|
|
if (Array.isArray(text)) {
|
|
|
+ this.ctx.beginPath()
|
|
|
+ this.ctx.font = `${bold} ${fontsize}px sans-serif`
|
|
|
+ this.ctx.setFillStyle(color)
|
|
|
text.forEach((e, i) => {
|
|
|
this.ctx.fillText(e, x, y + fontsize * i)
|
|
|
})
|
|
|
} else {
|
|
|
+ this.ctx.beginPath()
|
|
|
+ this.ctx.font = `${bold} ${fontsize}px sans-serif`
|
|
|
+ this.ctx.setFillStyle(color)
|
|
|
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`
|
|
|
+ await this.drawRoundRect(x + (text.length * fontsize) + 10, y-fontsize, 66, fontsize + 4, 6, '#FFBB00')
|
|
|
+ // this.ctx.fillStyle = `${this.options.duty.bgColor}`
|
|
|
+ // this.ctx.fillRect(x + (text.length * fontsize) + 10, y-fontsize, 66, fontsize + 4)
|
|
|
+ this.ctx.font = `${400} ${fontsize-4}px sans-serif`
|
|
|
this.ctx.setFillStyle('#fff')
|
|
|
- this.ctx.fillText(this.options.duty.text, x + (text.length * fontsize) -30, y)
|
|
|
+ this.ctx.fillText(this.options.duty.text, x + (text.length * fontsize) + 15, y - 2)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// 绘制底部
|
|
|
drawFooterText(callback) {
|
|
|
const { scale, textArray } = this.options
|
|
|
+ this.ctx.beginPath()
|
|
|
if (callback) {
|
|
|
callback({ scale, ctx: this.ctx, textArray })
|
|
|
} else {
|
|
@@ -178,14 +180,16 @@ export default class DrawPoster {
|
|
|
this.ctx.fillText(txt, 56 * scale, (710 + 56 * index) * scale)
|
|
|
})
|
|
|
}
|
|
|
+ this.ctx.save()
|
|
|
}
|
|
|
// 绘制底部二维码
|
|
|
async drawEwmImage() {
|
|
|
try {
|
|
|
const { ewmUrl, scale } = this.options
|
|
|
- const [error, result] = await uni.downloadFile({ url: ewmUrl })
|
|
|
- if (error) return
|
|
|
- this.ctx.drawImage(result.tempFilePath, 524 * scale, 730 * scale, 160 * scale, 160 * scale)
|
|
|
+ // const [error, result] = await uni.downloadFile({ url: ewmUrl })
|
|
|
+ console.log(ewmUrl, this.options)
|
|
|
+ // if (error) return
|
|
|
+ this.ctx.drawImage(ewmUrl, 524 * scale, 730 * scale, 160 * scale, 160 * scale)
|
|
|
return Promise.resolve(true)
|
|
|
} catch (e) {
|
|
|
return Promise.reject(e)
|