Blizzard
bb7db78763
- 头像用九参数 drawImage 居中裁剪（cover），竖图/横图都不变形，加白边圈 - 后端 IDCard 增 zodiac(按生日算星座) + weight，卡面加「星座/体重」行 - 加淡淡的肉垫水印 + 旋转的「肉垫计划·官方认证」印章 - 画布加高容纳新增内容 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
323 lines
10 KiB
JavaScript
323 lines
10 KiB
JavaScript
const store = require('../../utils/store.js');
|
|
const api = require('../../utils/api.js');
|
|
const { toastErr } = require('../../utils/ui.js');
|
|
|
|
// 卡片画布尺寸（逻辑像素）。真实导出会按 dpr 放大
|
|
const W = 620;
|
|
const H = 812;
|
|
|
|
// 在 canvas 2d 上加载一张图（远程或本地），resolve 出可直接 drawImage 的 image 对象。
|
|
// 加载失败 resolve(null)——头像或小程序码缺一张不该让整张卡画不出来
|
|
function loadImage(canvas, src) {
|
|
return new Promise((resolve) => {
|
|
if (!src) return resolve(null);
|
|
const img = canvas.createImage();
|
|
img.onload = () => resolve(img);
|
|
img.onerror = () => resolve(null);
|
|
img.src = src;
|
|
});
|
|
}
|
|
|
|
Page({
|
|
data: {
|
|
petId: '',
|
|
card: null,
|
|
cardImg: '',
|
|
qrReady: false,
|
|
saving: false,
|
|
},
|
|
onLoad(q) {
|
|
store
|
|
.ready()
|
|
.then(() => {
|
|
const id = (q && q.id) || store.currentPetId();
|
|
if (!id) {
|
|
wx.showToast({ title: '先选一只毛孩子', icon: 'none' });
|
|
return;
|
|
}
|
|
this.setData({ petId: id });
|
|
return api.petIDCard(id);
|
|
})
|
|
.then((card) => {
|
|
if (!card) return;
|
|
this.setData({ card, qrReady: !!card.qr_ready });
|
|
// 布局要等页面渲染完 canvas 节点才拿得到，放 nextTick
|
|
wx.nextTick(() => this.draw());
|
|
})
|
|
.catch((e) => toastErr(e));
|
|
},
|
|
|
|
draw() {
|
|
wx.createSelectorQuery()
|
|
.select('#idCanvas')
|
|
.fields({ node: true, size: true })
|
|
.exec((res) => {
|
|
const node = res && res[0] && res[0].node;
|
|
if (!node) return;
|
|
let dpr = 2;
|
|
try {
|
|
dpr = (wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync()).pixelRatio || 2;
|
|
} catch (e) {
|
|
dpr = 2;
|
|
}
|
|
node.width = W * dpr;
|
|
node.height = H * dpr;
|
|
const ctx = node.getContext('2d');
|
|
ctx.scale(dpr, dpr);
|
|
|
|
const c = this.data.card || {};
|
|
// 两张远程图都就绪再开画，否则小程序码会画不上或画一半（plan 里点过名的坑）
|
|
Promise.all([loadImage(node, c.avatar_url), loadImage(node, c.qr_url)]).then(([avatar, qr]) => {
|
|
this.paint(ctx, node, c, avatar, qr);
|
|
});
|
|
});
|
|
},
|
|
|
|
paint(ctx, node, c, avatar, qr) {
|
|
ctx.clearRect(0, 0, W, H);
|
|
|
|
// 外层留白背景
|
|
ctx.fillStyle = '#F3EFE8';
|
|
ctx.fillRect(0, 0, W, H);
|
|
|
|
const pad = 30;
|
|
const cardW = W - pad * 2;
|
|
|
|
// ── 上半张：资料区（蓝紫渐变）──
|
|
const topH = 430;
|
|
const g1 = ctx.createLinearGradient(pad, pad, W - pad, topH);
|
|
g1.addColorStop(0, '#FFF0D6');
|
|
g1.addColorStop(0.5, '#FFE0EC');
|
|
g1.addColorStop(1, '#E6EEFF');
|
|
this.roundRect(ctx, pad, pad, cardW, topH - pad, 28);
|
|
ctx.fillStyle = g1;
|
|
ctx.fill();
|
|
|
|
// 肉垫水印：卡内几枚淡淡的爪印，裁剪在圆角卡里
|
|
ctx.save();
|
|
this.roundRect(ctx, pad, pad, cardW, topH - pad, 28);
|
|
ctx.clip();
|
|
ctx.globalAlpha = 0.06;
|
|
ctx.font = '120px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
ctx.fillText('🐾', W - pad - 70, pad + 90);
|
|
ctx.font = '80px sans-serif';
|
|
ctx.fillText('🐾', W - pad - 150, topH - 70);
|
|
ctx.restore();
|
|
ctx.globalAlpha = 1;
|
|
ctx.textBaseline = 'alphabetic';
|
|
|
|
// 头像圆（描一圈白边更像证件照）
|
|
const avX = pad + 34, avY = pad + 34, avD = 120;
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
ctx.arc(avX + avD / 2, avY + avD / 2, avD / 2, 0, Math.PI * 2);
|
|
ctx.closePath();
|
|
ctx.clip();
|
|
if (avatar) {
|
|
// 居中裁剪成正方形再画：竖图/横图都不会被压变形（cover 效果）
|
|
const iw = avatar.width || avD;
|
|
const ih = avatar.height || avD;
|
|
const side = Math.min(iw, ih);
|
|
const sx = (iw - side) / 2;
|
|
const sy = (ih - side) / 2;
|
|
ctx.drawImage(avatar, sx, sy, side, side, avX, avY, avD, avD);
|
|
} else {
|
|
ctx.fillStyle = '#FFD9A3';
|
|
ctx.fillRect(avX, avY, avD, avD);
|
|
ctx.fillStyle = '#8A5A18';
|
|
ctx.font = '52px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
ctx.fillText(c.species === '狗狗' ? '🐶' : '🐱', avX + avD / 2, avY + avD / 2);
|
|
}
|
|
ctx.restore();
|
|
ctx.textBaseline = 'alphabetic';
|
|
// 头像白边圈
|
|
ctx.beginPath();
|
|
ctx.arc(avX + avD / 2, avY + avD / 2, avD / 2, 0, Math.PI * 2);
|
|
ctx.strokeStyle = 'rgba(255,255,255,.9)';
|
|
ctx.lineWidth = 5;
|
|
ctx.stroke();
|
|
|
|
// 资料行
|
|
const infoX = avX + avD + 28;
|
|
let y = pad + 52;
|
|
const line = (label, value) => {
|
|
ctx.textAlign = 'left';
|
|
ctx.font = '24px sans-serif';
|
|
ctx.fillStyle = '#9A8F82';
|
|
ctx.fillText(label, infoX, y);
|
|
ctx.fillStyle = '#2D2925';
|
|
ctx.font = '600 26px sans-serif';
|
|
ctx.fillText(value || '—', infoX + ctx.measureText(label).width + 14, y);
|
|
y += 46;
|
|
};
|
|
// 一行放两组「标签 值」，X 起点给定
|
|
const pair = (l1, v1, l2, v2) => {
|
|
ctx.textAlign = 'left';
|
|
ctx.font = '24px sans-serif';
|
|
ctx.fillStyle = '#9A8F82';
|
|
ctx.fillText(l1, infoX, y);
|
|
ctx.fillStyle = '#2D2925';
|
|
ctx.font = '600 26px sans-serif';
|
|
const w1 = ctx.measureText(v1 || '—').width;
|
|
ctx.fillText(v1 || '—', infoX + 62, y);
|
|
if (l2 && v2) {
|
|
const x2 = infoX + 62 + w1 + 26;
|
|
ctx.fillStyle = '#9A8F82';
|
|
ctx.font = '24px sans-serif';
|
|
ctx.fillText(l2, x2, y);
|
|
ctx.fillStyle = '#2D2925';
|
|
ctx.font = '600 26px sans-serif';
|
|
ctx.fillText(v2, x2 + 62, y);
|
|
}
|
|
y += 46;
|
|
};
|
|
line('姓名', c.name);
|
|
pair('性别', c.gender, '品种', c.breed);
|
|
line('出生', c.birthday);
|
|
pair('星座', c.zodiac, '体重', c.weight);
|
|
line('介绍', c.intro);
|
|
|
|
// 身份 ID：虚线 + 号
|
|
const idY = pad + 344;
|
|
ctx.strokeStyle = 'rgba(122,74,8,.22)';
|
|
ctx.lineWidth = 1;
|
|
ctx.setLineDash([6, 6]);
|
|
ctx.beginPath();
|
|
ctx.moveTo(pad + 34, idY);
|
|
ctx.lineTo(W - pad - 34, idY);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
ctx.textAlign = 'left';
|
|
ctx.font = '22px sans-serif';
|
|
ctx.fillStyle = '#9A8F82';
|
|
ctx.fillText('身份 ID', pad + 34, idY + 34);
|
|
ctx.font = '600 26px sans-serif';
|
|
ctx.fillStyle = '#2D2925';
|
|
ctx.fillText(c.id_no || '', pad + 34 + 90, idY + 34);
|
|
|
|
// ── 下半张：证件标题 + 小程序码 ──
|
|
const botY = topH + 12;
|
|
const botH = H - botY - pad;
|
|
const g2 = ctx.createLinearGradient(pad, botY, W - pad, botY + botH);
|
|
g2.addColorStop(0, '#E8F0FF');
|
|
g2.addColorStop(1, '#F0E8FF');
|
|
this.roundRect(ctx, pad, botY, cardW, botH, 28);
|
|
ctx.fillStyle = g2;
|
|
ctx.fill();
|
|
|
|
ctx.textAlign = 'left';
|
|
ctx.fillStyle = '#7D89A8';
|
|
ctx.font = '22px sans-serif';
|
|
ctx.fillText('宠 星 人 地 球 移 民', pad + 40, botY + 60);
|
|
ctx.fillStyle = '#4A5878';
|
|
ctx.font = '700 52px sans-serif';
|
|
ctx.fillText('居民身份卡', pad + 40, botY + 128);
|
|
|
|
ctx.fillStyle = '#8A93A8';
|
|
ctx.font = '22px sans-serif';
|
|
ctx.fillText('签发机构 肉垫计划', pad + 40, botY + 180);
|
|
ctx.fillText('有效期限 ' + (c.validity || '永久有效'), pad + 40, botY + 214);
|
|
|
|
// 官方认证印章（装饰）：淡棕红、旋一点角度，像盖上去的
|
|
ctx.save();
|
|
ctx.translate(W - pad - 120, botY + 100);
|
|
ctx.rotate((-14 * Math.PI) / 180);
|
|
ctx.globalAlpha = 0.5;
|
|
ctx.strokeStyle = '#B4623F';
|
|
ctx.fillStyle = '#B4623F';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
ctx.lineWidth = 4;
|
|
ctx.beginPath();
|
|
ctx.arc(0, 0, 60, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
ctx.lineWidth = 1.5;
|
|
ctx.beginPath();
|
|
ctx.arc(0, 0, 50, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
ctx.font = '32px sans-serif';
|
|
ctx.fillText('★', 0, -16);
|
|
ctx.font = '700 22px sans-serif';
|
|
ctx.fillText('肉垫计划', 0, 16);
|
|
ctx.font = '12px sans-serif';
|
|
ctx.fillText('官方认证', 0, 38);
|
|
ctx.restore();
|
|
ctx.globalAlpha = 1;
|
|
ctx.textBaseline = 'alphabetic';
|
|
|
|
// 小程序码（未发布时 qr 为 null，画个占位框）
|
|
const qrD = 128, qrX = W - pad - 40 - qrD, qrY = botY + botH - 40 - qrD;
|
|
ctx.fillStyle = '#fff';
|
|
this.roundRect(ctx, qrX, qrY, qrD, qrD, 12);
|
|
ctx.fill();
|
|
if (qr) {
|
|
ctx.drawImage(qr, qrX + 8, qrY + 8, qrD - 16, qrD - 16);
|
|
} else {
|
|
ctx.fillStyle = '#B5A99D';
|
|
ctx.font = '20px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText('小程序码', qrX + qrD / 2, qrY + qrD / 2 - 4);
|
|
ctx.fillText('待发布', qrX + qrD / 2, qrY + qrD / 2 + 26);
|
|
}
|
|
|
|
wx.canvasToTempFilePath(
|
|
{
|
|
canvas: node,
|
|
fileType: 'png',
|
|
success: (r) => this.setData({ cardImg: r.tempFilePath }),
|
|
fail: () => wx.showToast({ title: '生成失败，稍后再试', icon: 'none' }),
|
|
},
|
|
this,
|
|
);
|
|
},
|
|
|
|
roundRect(ctx, x, y, w, h, r) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(x + r, y);
|
|
ctx.arcTo(x + w, y, x + w, y + h, r);
|
|
ctx.arcTo(x + w, y + h, x, y + h, r);
|
|
ctx.arcTo(x, y + h, x, y, r);
|
|
ctx.arcTo(x, y, x + w, y, r);
|
|
ctx.closePath();
|
|
},
|
|
|
|
onSave() {
|
|
if (!this.data.cardImg) return wx.showToast({ title: '还在生成，稍等一下', icon: 'none' });
|
|
if (this.data.saving) return;
|
|
this.setData({ saving: true });
|
|
wx.saveImageToPhotosAlbum({
|
|
filePath: this.data.cardImg,
|
|
success: () => wx.showToast({ title: '已保存到相册', icon: 'success' }),
|
|
fail: (err) => {
|
|
const msg = (err && err.errMsg) || '';
|
|
if (msg.indexOf('cancel') >= 0) return;
|
|
// 拒过一次后 authorize 不再弹，必须引导去设置页
|
|
if (msg.indexOf('auth deny') >= 0 || msg.indexOf('authorize') >= 0) {
|
|
wx.showModal({
|
|
title: '需要相册权限',
|
|
content: '保存身份卡需要允许访问相册，去设置里打开一下？',
|
|
confirmText: '去设置',
|
|
success: (r) => r.confirm && wx.openSetting({}),
|
|
});
|
|
return;
|
|
}
|
|
wx.showToast({ title: '保存失败', icon: 'none' });
|
|
},
|
|
complete: () => this.setData({ saving: false }),
|
|
});
|
|
},
|
|
|
|
onShareAppMessage() {
|
|
const c = this.data.card || {};
|
|
return {
|
|
title: `${c.name || '我家毛孩子'} 的居民身份卡`,
|
|
path: '/pages/idcard/idcard?id=' + this.data.petId,
|
|
imageUrl: this.data.cardImg || '', // 用画好的卡当分享封面
|
|
};
|
|
},
|
|
});
|