boschchina-wechat-crm/utils/poster.js

/**
 * 名片海报生成工具
 * 使用 Canvas 2D 绘制名片海报
 */

const W = 750
const H = 780
const PADDING = 40

const roundRect = (ctx, x, y, w, h, r) => {
	ctx.beginPath()
	ctx.moveTo(x + r, y)
	ctx.lineTo(x + w - r, y)
	ctx.quadraticCurveTo(x + w, y, x + w, y + r)
	ctx.lineTo(x + w, y + h - r)
	ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h)
	ctx.lineTo(x + r, y + h)
	ctx.quadraticCurveTo(x, y + h, x, y + h - r)
	ctx.lineTo(x, y + r)
	ctx.quadraticCurveTo(x, y, x + r, y)
	ctx.closePath()
}

const loadImage = (src) => {
	return new Promise((resolve) => {
		if (!src) return resolve(null)
		const img = uni.createImage()
		img.src = src
		img.onload = () => resolve(img)
		img.onerror = () => resolve(null)
	})
}

const downloadImage = async (url) => {
	try {
		if (!url || !url.startsWith('http')) return url
		const res = await uni.downloadFile({ url })
		if (res.statusCode === 200) return res.tempFilePath
		return null
	} catch { return null }
}

const drawCircleAvatar = (ctx, img, cx, cy, r) => {
	ctx.save()
	ctx.beginPath()
	ctx.arc(cx, cy, r, 0, Math.PI * 2)
	ctx.clip()
	if (img) ctx.drawImage(img, cx - r, cy - r, r * 2, r * 2)
	ctx.restore()
}

const drawAvatarFallback = (ctx, cardInfo, cx, cy, r) => {
	ctx.save()
	ctx.beginPath()
	ctx.arc(cx, cy, r, 0, Math.PI * 2)
	ctx.fillStyle = '#4080FF'
	ctx.fill()
	ctx.strokeStyle = 'rgba(255,255,255,0.6)'
	ctx.lineWidth = 4
	ctx.stroke()
	const initial = cardInfo.nickName ? cardInfo.nickName.charAt(0) : '?'
	ctx.fillStyle = '#FFFFFF'
	ctx.font = `bold ${r}px sans-serif`
	ctx.textAlign = 'center'
	ctx.textBaseline = 'middle'
	ctx.fillText(initial, cx, cy)
	ctx.restore()
}

const drawContactRow = (ctx, emoji, text, x, y) => {
	if (!text) return
	// 图标背景圆
	ctx.save()
	ctx.beginPath()
	ctx.arc(x + 20, y + 20, 20, 0, Math.PI * 2)
	ctx.fillStyle = 'rgba(64, 128, 255, 0.08)'
	ctx.fill()
	ctx.restore()
	// Emoji
	ctx.font = '22px sans-serif'
	ctx.textAlign = 'center'
	ctx.textBaseline = 'middle'
	ctx.fillText(emoji, x + 20, y + 20)
	// 文字 - 超长时自动换行
	ctx.font = '26px sans-serif'
	ctx.textAlign = 'left'
	ctx.textBaseline = 'middle'
	ctx.fillStyle = '#555555'
	// 计算可用宽度（图标到右边界）
	const textMaxWidth = 480  // 联系方式文本最大宽度
	const textX = x + 52
	if (ctx.measureText(text).width > textMaxWidth) {
		// 超长时换行显示（从垂直居中位置开始）
		ctx.textBaseline = 'top'
		const lineY = y + 10 // 和图标居中对齐的偏移
		fillTextWrap(ctx, text, textX, lineY, textMaxWidth, 40, 'left')
	} else {
		ctx.fillText(text, textX, y + 20)
	}
}

const fillTextWrap = (ctx, text, x, y, maxWidth, lineHeight, align = 'left') => {
	if (!text) return y
	ctx.textAlign = align
	ctx.textBaseline = 'top'
	const chars = text.split('')
	let line = '', cy = y
	for (let i = 0; i < chars.length; i++) {
		const test = line + chars[i]
		if (ctx.measureText(test).width > maxWidth && i > 0) {
			ctx.fillText(line, x, cy)
			line = chars[i]
			cy += lineHeight
		} else {
			line = test
		}
	}
	ctx.fillText(line, x, cy)
	return cy + lineHeight
}

export const generateCardPoster = async (cardInfo = {}) => {
	return new Promise((resolve, reject) => {
		const query = uni.createSelectorQuery()
		query.select('#posterCanvas')
			.fields({ node: true, size: true })
			.exec(async (res) => {
				if (!res || !res[0]) {
					reject(new Error('Canvas 节点未找到'))
					return
				}

				const canvas = res[0].node
				const ctx = canvas.getContext('2d')
				const dpr = uni.getSystemInfoSync().pixelRatio || 2
				canvas.width = W * dpr
				canvas.height = H * dpr
				ctx.scale(dpr, dpr)

				// ===== 1. 渐变背景 =====
				const bgGrad = ctx.createLinearGradient(0, 0, 0, H)
				bgGrad.addColorStop(0, '#4A90E2')
				bgGrad.addColorStop(0.5, '#6FB3F2')
				bgGrad.addColorStop(1, '#B0E0E6')
				ctx.fillStyle = bgGrad
				ctx.fillRect(0, 0, W, H)

				// ===== 2. 装饰圆点 =====
				ctx.fillStyle = 'rgba(255,255,255,0.10)'
				ctx.beginPath(); ctx.arc(620, 160, 100, 0, Math.PI * 2); ctx.fill()
				ctx.beginPath(); ctx.arc(680, 320, 60, 0, Math.PI * 2); ctx.fill()
				ctx.beginPath(); ctx.arc(-20, 640, 80, 0, Math.PI * 2); ctx.fill()

				// ===== 3. 白色卡片 =====
				const cardX = PADDING, cardY = 60
				const cardW = W - PADDING * 2, cardH = 660
				ctx.save()
				ctx.shadowColor = 'rgba(0,0,0,0.08)'
				ctx.shadowBlur = 24
				ctx.shadowOffsetY = 6
				ctx.fillStyle = '#FFFFFF'
				roundRect(ctx, cardX, cardY, cardW, cardH, 24)
				ctx.fill()
				ctx.restore()

				// ===== 4. 内部名片卡片 =====
				const innerX = cardX + 32
				const innerY = cardY + 32
				const innerW = cardW - 64
				const innerH = cardH - 64
				ctx.save()
				ctx.shadowColor = 'rgba(0,0,0,0.05)'
				ctx.shadowBlur = 16
				ctx.shadowOffsetY = 3
				ctx.fillStyle = '#FFFFFF'
				roundRect(ctx, innerX, innerY, innerW, innerH, 16)
				ctx.fill()
				ctx.restore()

				// 背景图
				try {
					const cardBg = await loadImage('/static/image/home/usecard-bg.png')
					if (cardBg) {
						ctx.save()
						roundRect(ctx, innerX, innerY, innerW, innerH, 16)
						ctx.clip()
						ctx.drawImage(cardBg, innerX, innerY, innerW, innerH)
						ctx.restore()
					}
				} catch (e) {}

				// ===== 5. 头像（右上角）=====
				const avatarCx = innerX + innerW - 100
				const avatarCy = innerY + 70
				const avatarR = 60
				ctx.save()
				ctx.beginPath()
				ctx.arc(avatarCx, avatarCy, avatarR + 4, 0, Math.PI * 2)
				ctx.fillStyle = 'rgba(255,255,255,0.5)'
				ctx.fill()
				ctx.restore()

				let avatarImg = null
				if (cardInfo.avatar) {
					const localPath = await downloadImage(cardInfo.avatar)
					avatarImg = await loadImage(localPath)
				}
				if (avatarImg) {
					drawCircleAvatar(ctx, avatarImg, avatarCx, avatarCy, avatarR)
				} else {
					drawAvatarFallback(ctx, cardInfo, avatarCx, avatarCy, avatarR)
				}

				// ===== 6. 姓名 + 职位 + 公司 =====
				const nameX = innerX + 44
				const nameY = innerY + 50

				ctx.fillStyle = '#202020'
				ctx.font = 'bold 44px sans-serif'
				ctx.textAlign = 'left'
				ctx.textBaseline = 'top'
				const name = cardInfo.nickName || '用户'
				ctx.fillText(name, nameX, nameY)
				const nameW = ctx.measureText(name).width

				// 职位标签
				if (cardInfo.postName) {
					const tagX = nameX + nameW + 14
					ctx.font = '22px sans-serif'
					const tagTextW = ctx.measureText(cardInfo.postName).width
					const tagW = tagTextW + 26
					ctx.fillStyle = 'rgba(68, 110, 255, 0.10)'
					roundRect(ctx, tagX, nameY + 6, tagW, 34, 8)
					ctx.fill()
					ctx.fillStyle = '#446EFF'
					ctx.textAlign = 'left'
					ctx.textBaseline = 'top'
					ctx.fillText(cardInfo.postName, tagX + 13, nameY + 11)
				}

				// 公司名称（最大宽度避开右上方头像）
				ctx.fillStyle = '#666666'
				ctx.font = '26px sans-serif'
				ctx.textAlign = 'left'
				ctx.textBaseline = 'top'
				const companyMaxW = innerW - 160
				const companyName = cardInfo.companyName || '公司名称'
				// 如果公司名太长，手动截断
				ctx.font = '26px sans-serif'
				if (ctx.measureText(companyName).width > companyMaxW) {
					let display = companyName
					while (ctx.measureText(display + '...').width > companyMaxW && display.length > 0) {
						display = display.substring(0, display.length - 1)
					}
					ctx.fillText(display + '...', innerX + 44, nameY + 60)
				} else {
					ctx.fillText(companyName, innerX + 44, nameY + 60)
				}

				// ===== 7. 联系方式 =====
				const contactY = innerY + 160
				const contactX = innerX + 44
				const contactGap = 60

				ctx.strokeStyle = '#EEEEEE'
				ctx.lineWidth = 1
				ctx.beginPath()
				ctx.moveTo(contactX, contactY)
				ctx.lineTo(innerX + innerW - 44, contactY)
				ctx.stroke()

				drawContactRow(ctx, '📞', cardInfo.phonenumber, contactX, contactY + 20)
				drawContactRow(ctx, '✉', cardInfo.email, contactX, contactY + 20 + contactGap)
				drawContactRow(ctx, '📍', cardInfo.companyAddress, contactX, contactY + 20 + contactGap * 2)

				// ===== 8. 导出 =====
				setTimeout(() => {
					uni.canvasToTempFilePath({
						canvas,
						success: (res) => resolve(res.tempFilePath),
						fail: (err) => reject(err)
					})
				}, 400)
			})
	})
}

export const savePosterToAlbum = (tempFilePath) => {
	return new Promise((resolve, reject) => {
		uni.authorize({
			scope: 'scope.writePhotosAlbum',
			success: () => {
				uni.saveImageToPhotosAlbum({
					filePath: tempFilePath,
					success: () => resolve(),
					fail: (err) => reject(err)
				})
			},
			fail: () => {
				uni.showModal({
					title: '提示',
					content: '需要授权相册权限才能保存名片',
					confirmText: '去设置',
					success: (res) => {
						if (res.confirm) uni.openSetting({})
						reject(new Error('未授权'))
					}
				})
			}
		})
	})
}

export default { generateCardPoster, savePosterToAlbum }