/** * 名片海报生成工具 * 使用 Canvas 2D 绘制名片海报 * 名片底部添加名片码(二维码) */ const W = 750 const H = 600 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() } /** * 创建图片对象 - 必须使用 canvas.createImage() * 微信小程序 Canvas 2D 中不能用 uni.createImage() */ const createCanvasImage = (canvas, src) => { return new Promise((resolve) => { if (!src || !canvas) return resolve(null) try { const img = canvas.createImage() img.onload = () => resolve(img) img.onerror = () => { console.warn('图片加载失败:', src) resolve(null) } img.src = src } catch (e) { return resolve(null) } }) } const downloadImage = async (url) => { try { if (!url || !url.startsWith('http')) return url // 使用 getImageInfo 获取图片本地临时路径(微信原生能力,通过 request 域名即可,无需 downloadFile 白名单) const res = await uni.getImageInfo({ src: url }) if (res && res.path) return res.path return null } catch (e) { console.warn('获取图片信息失败:', url, e) return null } } /** * 将图片资源转换为Canvas可用的临时路径 */ const resolveImageSrc = async (src) => { if (!src) return null if (src.startsWith('http')) { try { // getImageInfo 走 request 域名,无需额外配置 downloadFile 白名单 const res = await uni.getImageInfo({ src }) if (res && res.path) return res.path return null } catch { return null } } if (src.startsWith('/') || src.startsWith('.')) { try { const res = await uni.getImageInfo({ src }) return res.path } catch { return null } } return src } /** * base64 二维码转临时文件路径 */ const qrBase64ToTempFile = async (base64Data) => { if (!base64Data) return null return new Promise((resolve) => { try { const pureBase64 = base64Data.replace(/^data:image\/\w+;base64,/, '') const fileName = `${Date.now()}_qrcode.png` const filePath = `${wx.env.USER_DATA_PATH}/${fileName}` const fs = uni.getFileSystemManager() fs.writeFile({ filePath, data: pureBase64, encoding: 'base64', success: () => resolve(filePath), fail: () => resolve(null) }) } catch { resolve(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, iconImg, text, x, y) => { if (!text) return // 图标(40x40) const iconSize = 32 const iconX = x const iconY = y if (iconImg) { ctx.drawImage(iconImg, iconX, iconY, iconSize, iconSize) } ctx.font = '26px sans-serif' ctx.textAlign = 'left' ctx.textBaseline = 'middle' ctx.fillStyle = '#202020' const textMaxWidth = 480 const textX = x + iconSize + 12 if (ctx.measureText(text).width > textMaxWidth) { ctx.textBaseline = 'top' const lineY = y + 4 fillTextWrap(ctx, text, textX, lineY, textMaxWidth, 40, 'left') } else { ctx.fillText(text, textX, y + iconSize / 2) } } 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 = {}, qrInfo = {}) => { 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, '#155DFC') bgGrad.addColorStop(0.5, '#155DFC') bgGrad.addColorStop(1, '#155DFC') 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 = 20, cardY = 60 const cardW = W - 40, cardH = 480 const innerPad = 16 const innerX = cardX + innerPad const innerY = cardY + innerPad const innerW = cardW - innerPad * 2 const innerH = cardH - innerPad * 2 // 背景图(静态资源直接传路径,canvas.createImage 支持加载本地包内资源) try { const cardBg = await createCanvasImage(canvas, '/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) { console.warn('加载名片背景图失败:', e) } // ===== 5. 头像(右上角)===== const avatarCx = innerX + innerW - 100 const avatarCy = innerY + 115 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) { // 先用 downloadImage(内部走 getImageInfo)获取本地临时路径 const localPath = await downloadImage(cardInfo.avatar) if (localPath) { avatarImg = await createCanvasImage(canvas, localPath) } else { console.warn('未能获取头像本地路径,直接尝试原始链接') } } if (avatarImg) { drawCircleAvatar(ctx, avatarImg, avatarCx, avatarCy, avatarR) } else { drawAvatarFallback(ctx, cardInfo, avatarCx, avatarCy, avatarR) } // ===== 6. 姓名 + 职位 + 公司 ===== const nameX = innerX + 44 const nameY = innerY + 70 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) { ctx.font = '22px sans-serif' ctx.fillStyle = '#202020' ctx.textAlign = 'left' ctx.textBaseline = 'top' ctx.fillText(cardInfo.postName, nameX + nameW + 14, nameY + 11) } // 公司名称 ctx.fillStyle = '#202020' ctx.font = '26px sans-serif' ctx.textAlign = 'left' ctx.textBaseline = 'top' const companyMaxW = innerW - 200 const companyName = cardInfo.companyName || '公司名称' const companyX = innerX + 44 const companyY = nameY + 60 const companyEndY = fillTextWrap(ctx, companyName, companyX, companyY, companyMaxW, 36, 'left') // ===== 7. 联系方式 ===== const contactY = Math.max(companyEndY + 24, innerY + 160) const contactX = innerX + 44 const contactGap = 60 // 预加载联系方式图标 const phoneIcon = await createCanvasImage(canvas, '/static/image/public/phone-icon.png') const emailIcon = await createCanvasImage(canvas, '/static/image/public/email-icon.png') const addressIcon = await createCanvasImage(canvas, '/static/image/public/address-icon.png') drawContactRow(ctx, phoneIcon, cardInfo.phonenumber, contactX, contactY + 20) drawContactRow(ctx, emailIcon, cardInfo.email, contactX, contactY + 20 + contactGap) drawContactRow(ctx, addressIcon, cardInfo.companyAddress, contactX, contactY + 20 + contactGap * 2) // ===== 8. 导出 ===== setTimeout(() => { uni.canvasToTempFilePath({ canvas, success: (res) => resolve(res.tempFilePath), fail: (err) => reject(err) }) }, 600) }) }) } 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 }