|
|
@@ -99,25 +99,115 @@ Page({
|
|
|
this.setData({ showShare: false });
|
|
|
},
|
|
|
// 点击海报生成图片
|
|
|
- async openPoster(){
|
|
|
- this.setData({
|
|
|
- showShare: false
|
|
|
- })
|
|
|
- wx.showLoading({
|
|
|
- title: '海报生成中...',
|
|
|
- mask: true
|
|
|
- });
|
|
|
- try {
|
|
|
- const res = await sharePoster();
|
|
|
- if(res.code == 200){
|
|
|
- console.log(res.data);
|
|
|
- this.setData({ showPoster:true,posterImg: res.data});
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.log(error)
|
|
|
- } finally{
|
|
|
- wx.hideLoading();
|
|
|
+ async openPoster() {
|
|
|
+ const userInfo = app.globalData.userInfo;
|
|
|
+ const programConfig = app.globalData.programConfig;
|
|
|
+ console.log(userInfo)
|
|
|
+ const posterKey = `posterImg_${userInfo.avatar}_${userInfo.nickname}_${programConfig.share_img}_${programConfig.share_qrcode}`;
|
|
|
+ const cachedData = wx.getStorageSync('posterCache') || {};
|
|
|
+ if (cachedData.key === posterKey && cachedData.path) {
|
|
|
+ this.setData({ posterImg: cachedData.path, showPoster: true });
|
|
|
+ } else {
|
|
|
+ this.setData({ showPoster: true }, async () => {
|
|
|
+ const path = await this.drawPoster();
|
|
|
+ wx.setStorageSync('posterCache', { key: posterKey, path });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async drawPoster() {
|
|
|
+ const ctx = wx.createCanvasContext('posterCanvas', this);
|
|
|
+ const canvasWidth = 300;
|
|
|
+ const canvasHeight = 600;
|
|
|
+ const bottomHeight = 80;
|
|
|
+ const radius = 16; // 圆角半径
|
|
|
+
|
|
|
+ ctx.save();
|
|
|
+ ctx.setFillStyle('#fff');
|
|
|
+ this.drawRoundRect(ctx, 0, 0, canvasWidth, canvasHeight, radius);
|
|
|
+
|
|
|
+ // 背景图
|
|
|
+ const bgUrl = app.globalData.programConfig.share_img;
|
|
|
+ if (bgUrl) {
|
|
|
+ const bgPath = bgUrl.startsWith('http') ? await this.downloadImage(bgUrl) : bgUrl;
|
|
|
+ ctx.drawImage(bgPath, 0, 0, canvasWidth, canvasHeight - bottomHeight);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 底部白色区域
|
|
|
+ ctx.setFillStyle('#fff');
|
|
|
+ ctx.fillRect(0, canvasHeight - bottomHeight, canvasWidth, bottomHeight);
|
|
|
+
|
|
|
+ // 用户头像（圆形）
|
|
|
+ const avatarUrl = app.globalData.userInfo.avatar;
|
|
|
+ if (avatarUrl) {
|
|
|
+ const avatarPath = avatarUrl.startsWith('http') ? await this.downloadImage(avatarUrl) : avatarUrl;
|
|
|
+ const avatarSize = 40;
|
|
|
+ const avatarX = 20;
|
|
|
+ const avatarY = canvasHeight - bottomHeight + (bottomHeight - avatarSize) / 2;
|
|
|
+ ctx.save();
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(avatarX + avatarSize / 2, avatarY + avatarSize / 2, avatarSize / 2, 0, Math.PI * 2);
|
|
|
+ ctx.clip();
|
|
|
+ ctx.drawImage(avatarPath, avatarX, avatarY, avatarSize, avatarSize);
|
|
|
+ ctx.restore();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 昵称
|
|
|
+ const nickName = app.globalData.userInfo.nickname || '游客';
|
|
|
+ ctx.setFontSize(16);
|
|
|
+ ctx.setFillStyle('#000');
|
|
|
+ const textX = 20 + 40 + 12;
|
|
|
+ const textY = canvasHeight - bottomHeight + bottomHeight / 2 + 6;
|
|
|
+ ctx.fillText(nickName, textX, textY);
|
|
|
+
|
|
|
+ // 二维码
|
|
|
+ const qrUrl = app.globalData.programConfig.share_qrcode;
|
|
|
+ if (qrUrl) {
|
|
|
+ const qrPath = qrUrl.startsWith('http') ? await this.downloadImage(qrUrl) : qrUrl;
|
|
|
+ const qrSize = 50;
|
|
|
+ const qrX = canvasWidth - qrSize - 20;
|
|
|
+ const qrY = canvasHeight - bottomHeight + (bottomHeight - qrSize) / 2;
|
|
|
+ ctx.drawImage(qrPath, qrX, qrY, qrSize, qrSize);
|
|
|
}
|
|
|
+ ctx.restore(); // 恢复裁剪
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ ctx.draw(true, () => {
|
|
|
+ wx.canvasToTempFilePath({
|
|
|
+ canvasId: 'posterCanvas',
|
|
|
+ success: res => resolve(res.tempFilePath),
|
|
|
+ fail: err => {
|
|
|
+ console.error('生成临时文件失败:', err);
|
|
|
+ reject(err);
|
|
|
+ }
|
|
|
+ }, this);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 下载网络图片到临时路径
|
|
|
+ downloadImage(url) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ wx.downloadFile({
|
|
|
+ url,
|
|
|
+ success(res) {
|
|
|
+ if (res.statusCode === 200) resolve(res.tempFilePath);
|
|
|
+ else reject(new Error('下载失败'));
|
|
|
+ },
|
|
|
+ fail(err) { reject(err); }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 绘制圆角矩形函数
|
|
|
+ drawRoundRect(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();
|
|
|
+ ctx.fill();
|
|
|
+ ctx.clip(); // 关键：裁剪出圆角
|
|
|
},
|
|
|
closePoster(){
|
|
|
this.setData({ showPoster: false});
|
|
|
@@ -128,16 +218,8 @@ Page({
|
|
|
wx.showToast({ title: '没有海报图片', icon: 'none' });
|
|
|
return;
|
|
|
}
|
|
|
- // 将 base64 转临时文件路径
|
|
|
- const base64Data = this.data.posterImg;
|
|
|
- const filePath = `${wx.env.USER_DATA_PATH}/poster.png`;
|
|
|
- const fs = wx.getFileSystemManager();
|
|
|
- const buffer = wx.base64ToArrayBuffer(base64Data);
|
|
|
-
|
|
|
- fs.writeFileSync(filePath, buffer, 'binary');
|
|
|
-
|
|
|
wx.saveImageToPhotosAlbum({
|
|
|
- filePath,
|
|
|
+ filePath: this.data.posterImg,
|
|
|
success() { wx.showToast({ title: '保存成功' }); },
|
|
|
fail(err) {
|
|
|
if (err.errMsg.includes('auth')) wx.openSetting();
|
|
|
@@ -146,18 +228,11 @@ Page({
|
|
|
},
|
|
|
// 发送朋友
|
|
|
sendImg(){
|
|
|
- REPORT_BEHAVIOR('分享');
|
|
|
- // 将 base64 转临时文件路径
|
|
|
- const base64Data = this.data.posterImg;
|
|
|
- const filePath = `${wx.env.USER_DATA_PATH}/poster.png`;
|
|
|
- const fs = wx.getFileSystemManager();
|
|
|
- const buffer = wx.base64ToArrayBuffer(base64Data);
|
|
|
-
|
|
|
- fs.writeFileSync(filePath, buffer, 'binary');
|
|
|
+ if (!this.data.posterImg) return;
|
|
|
wx.showShareImageMenu({
|
|
|
- path: filePath,
|
|
|
+ path: this.data.posterImg,
|
|
|
success() {},
|
|
|
fail: console.error,
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
})
|
wkw