fix: image
This commit is contained in:
@@ -676,7 +676,7 @@ onShareAppMessage(async () => {
|
|||||||
title: "新春祝福",
|
title: "新春祝福",
|
||||||
path: `/pages/index/index?shareToken=${shareToken}`,
|
path: `/pages/index/index?shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/cfed2edbfa19250b836a87a4bbf0d5ad.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
uni.showLoading({ title: "分享中...", mask: true });
|
uni.showLoading({ title: "分享中...", mask: true });
|
||||||
|
|||||||
@@ -167,7 +167,7 @@ onShareAppMessage(async () => {
|
|||||||
title: "马年运势我已经抽过了,你的会是什么?",
|
title: "马年运势我已经抽过了,你的会是什么?",
|
||||||
path: `${cardId.value ? `/pages/fortune/detail?shareToken=${shareToken}` : `/pages/fortune/index?shareToken=${shareToken}`}`,
|
path: `${cardId.value ? `/pages/fortune/detail?shareToken=${shareToken}` : `/pages/fortune/index?shareToken=${shareToken}`}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/cfed2edbfa19250b836a87a4bbf0d5ad.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -178,7 +178,7 @@ onShareAppMessage(async () => {
|
|||||||
title: "新年好运已送达 🎊|祝福卡·头像·壁纸",
|
title: "新年好运已送达 🎊|祝福卡·头像·壁纸",
|
||||||
path: `/pages/index/index?shareToken=${shareToken}`,
|
path: `/pages/index/index?shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/cfed2edbfa19250b836a87a4bbf0d5ad.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -66,7 +66,7 @@
|
|||||||
fontFamily: selectedFont.family,
|
fontFamily: selectedFont.family,
|
||||||
fontSize: fontSize + 'rpx',
|
fontSize: fontSize + 'rpx',
|
||||||
lineHeight: fontSize * 1.5 + 'rpx',
|
lineHeight: fontSize * 1.5 + 'rpx',
|
||||||
fontWeight: 'bold',
|
fontWeight: fontWeight,
|
||||||
}"
|
}"
|
||||||
>{{
|
>{{
|
||||||
(targetName || "") + "\n " + (blessingText.content || "")
|
(targetName || "") + "\n " + (blessingText.content || "")
|
||||||
@@ -85,10 +85,14 @@
|
|||||||
>
|
>
|
||||||
<image class="avatar" :src="userAvatar" mode="aspectFill" />
|
<image class="avatar" :src="userAvatar" mode="aspectFill" />
|
||||||
<view class="user-info">
|
<view class="user-info">
|
||||||
<text class="user-name" :style="{ color: signatureColor }">{{
|
<text
|
||||||
signatureName
|
class="user-name"
|
||||||
}}</text>
|
:style="{ color: signatureColor, fontWeight: fontWeight }"
|
||||||
<text class="user-desc" :style="{ color: signatureColor }"
|
>{{ signatureName }}</text
|
||||||
|
>
|
||||||
|
<text
|
||||||
|
class="user-desc"
|
||||||
|
:style="{ color: signatureColor, fontWeight: fontWeight }"
|
||||||
>送上祝福</text
|
>送上祝福</text
|
||||||
>
|
>
|
||||||
</view>
|
</view>
|
||||||
@@ -288,6 +292,27 @@
|
|||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 字体粗细 -->
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">字体粗细</text>
|
||||||
|
<view class="weight-options">
|
||||||
|
<view
|
||||||
|
class="weight-btn"
|
||||||
|
:class="{ active: fontWeight === 'normal' }"
|
||||||
|
@tap="fontWeight = 'normal'"
|
||||||
|
>
|
||||||
|
<text>常规</text>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="weight-btn"
|
||||||
|
:class="{ active: fontWeight === 'bold' }"
|
||||||
|
@tap="fontWeight = 'bold'"
|
||||||
|
>
|
||||||
|
<text style="font-weight: bold">加粗</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<text class="label">祝福语宽窄</text>
|
<text class="label">祝福语宽窄</text>
|
||||||
<slider
|
<slider
|
||||||
@@ -624,6 +649,7 @@ const userAvatar = ref(userStore?.userInfo?.avatarUrl || DEFAULT_AVATAR);
|
|||||||
|
|
||||||
const blessingText = ref({});
|
const blessingText = ref({});
|
||||||
const fontSize = ref(38);
|
const fontSize = ref(38);
|
||||||
|
const fontWeight = ref("normal"); // 默认加粗
|
||||||
|
|
||||||
const textColors = [
|
const textColors = [
|
||||||
'#F8DA84',
|
'#F8DA84',
|
||||||
@@ -640,8 +666,8 @@ const textColors = [
|
|||||||
"#9013FE",
|
"#9013FE",
|
||||||
"#FFC0CB",
|
"#FFC0CB",
|
||||||
];
|
];
|
||||||
const selectedColor = ref("#F8DA84");
|
const selectedColor = ref("#000000");
|
||||||
const signatureColor = ref("#B4802C");
|
const signatureColor = ref("#000000");
|
||||||
|
|
||||||
const fontList = [
|
const fontList = [
|
||||||
{ name: "默认", family: "PingFang SC", url: "" },
|
{ name: "默认", family: "PingFang SC", url: "" },
|
||||||
@@ -965,7 +991,7 @@ onShareAppMessage(async (options) => {
|
|||||||
title: "新春祝福",
|
title: "新春祝福",
|
||||||
path: "/pages/index/index?shareToken=" + shareToken,
|
path: "/pages/index/index?shareToken=" + shareToken,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/cfed2edbfa19250b836a87a4bbf0d5ad.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
// 1. 确保有 cardId (如果内容有变动,最好是新建)
|
// 1. 确保有 cardId (如果内容有变动,最好是新建)
|
||||||
@@ -977,7 +1003,7 @@ onShareAppMessage(async (options) => {
|
|||||||
title: "我刚做了一张祝福卡片,送给你",
|
title: "我刚做了一张祝福卡片,送给你",
|
||||||
path: "/pages/detail/index?shareToken=" + shareToken,
|
path: "/pages/detail/index?shareToken=" + shareToken,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/13ec1134e6614feadeeaaa9ef21ea96e.png",
|
"https://file.lihailezzc.com/resource/b703cf78a970a65490d52213e4d7bf33.png",
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
const shareToken = await getShareToken("card_generate_index", "");
|
const shareToken = await getShareToken("card_generate_index", "");
|
||||||
@@ -985,7 +1011,7 @@ onShareAppMessage(async (options) => {
|
|||||||
title: "新春祝福",
|
title: "新春祝福",
|
||||||
path: `/pages/index/index?shareToken=${shareToken}`,
|
path: `/pages/index/index?shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/cfed2edbfa19250b836a87a4bbf0d5ad.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -1192,6 +1218,7 @@ const saveByCanvas = async (save = true) => {
|
|||||||
maxWidth: r2p(bubbleMaxWidth.value), // 预览中 bubble-text 的宽度
|
maxWidth: r2p(bubbleMaxWidth.value), // 预览中 bubble-text 的宽度
|
||||||
canvasWidth: W,
|
canvasWidth: W,
|
||||||
fontSize: r2p(fontSize.value),
|
fontSize: r2p(fontSize.value),
|
||||||
|
fontWeight: fontWeight.value,
|
||||||
lineHeight: r2p(fontSize.value * 1.6), // 预览中是 1.6
|
lineHeight: r2p(fontSize.value * 1.6), // 预览中是 1.6
|
||||||
padding: r2p(40 + 30), // 内部 padding 40 + 容器 padding 30
|
padding: r2p(40 + 30), // 内部 padding 40 + 容器 padding 30
|
||||||
backgroundColor: "transparent",
|
backgroundColor: "transparent",
|
||||||
@@ -1209,6 +1236,7 @@ const saveByCanvas = async (save = true) => {
|
|||||||
username: signatureName.value,
|
username: signatureName.value,
|
||||||
desc: "送上祝福",
|
desc: "送上祝福",
|
||||||
textColor: signatureColor.value,
|
textColor: signatureColor.value,
|
||||||
|
fontWeight: fontWeight.value,
|
||||||
avatarSize: r2p(64),
|
avatarSize: r2p(64),
|
||||||
padding: r2p(15),
|
padding: r2p(15),
|
||||||
fontSizeName: r2p(24),
|
fontSizeName: r2p(24),
|
||||||
@@ -1280,13 +1308,14 @@ function drawBubbleText(ctx, options) {
|
|||||||
backgroundColor = "rgba(255,255,255,0.9)",
|
backgroundColor = "rgba(255,255,255,0.9)",
|
||||||
textColor = "#fff",
|
textColor = "#fff",
|
||||||
fontSize = 32,
|
fontSize = 32,
|
||||||
|
fontWeight = "normal",
|
||||||
fontFamily = "PingFang SC",
|
fontFamily = "PingFang SC",
|
||||||
canvasWidth, // 新增:画布宽度,用于居中计算
|
canvasWidth, // 新增:画布宽度,用于居中计算
|
||||||
} = options;
|
} = options;
|
||||||
if (!text) return;
|
if (!text) return;
|
||||||
|
|
||||||
ctx.fillStyle = textColor;
|
ctx.fillStyle = textColor;
|
||||||
ctx.font = `bold ${fontSize}px '${fontFamily}'`;
|
ctx.font = `${fontWeight === "bold" ? "bold " : ""}${fontSize}px '${fontFamily}'`;
|
||||||
ctx.textAlign = "left";
|
ctx.textAlign = "left";
|
||||||
ctx.textBaseline = "top";
|
ctx.textBaseline = "top";
|
||||||
|
|
||||||
@@ -1348,15 +1377,16 @@ function drawUserBubble(ctx, options) {
|
|||||||
fontSizeDesc = 20,
|
fontSizeDesc = 20,
|
||||||
bubbleColor = "rgba(255,255,255,0.18)",
|
bubbleColor = "rgba(255,255,255,0.18)",
|
||||||
textColor = "#000000",
|
textColor = "#000000",
|
||||||
|
fontWeight = "normal",
|
||||||
} = options;
|
} = options;
|
||||||
|
|
||||||
// 设置字体
|
// 设置字体
|
||||||
ctx.textBaseline = "top";
|
ctx.textBaseline = "top";
|
||||||
ctx.font = `${fontSizeName}px 'PingFang SC'`;
|
ctx.font = `${fontWeight === "bold" ? "bold " : ""}${fontSizeName}px 'PingFang SC'`;
|
||||||
|
|
||||||
// 测量文字宽度
|
// 测量文字宽度
|
||||||
const nameWidth = ctx.measureText(username).width;
|
const nameWidth = ctx.measureText(username).width;
|
||||||
ctx.font = `${fontSizeDesc}px 'PingFang SC'`;
|
ctx.font = `${fontWeight === "bold" ? "bold " : ""}${fontSizeDesc}px 'PingFang SC'`;
|
||||||
const descWidth = ctx.measureText(desc).width;
|
const descWidth = ctx.measureText(desc).width;
|
||||||
|
|
||||||
// 计算气泡宽度和高度
|
// 计算气泡宽度和高度
|
||||||
@@ -1407,11 +1437,11 @@ function drawUserBubble(ctx, options) {
|
|||||||
const textStartY = drawY + (bubbleHeight - totalTextHeight) / 2;
|
const textStartY = drawY + (bubbleHeight - totalTextHeight) / 2;
|
||||||
|
|
||||||
ctx.fillStyle = textColor;
|
ctx.fillStyle = textColor;
|
||||||
ctx.font = `${fontSizeName}px 'PingFang SC'`;
|
ctx.font = `${fontWeight === "bold" ? "bold " : ""}${fontSizeName}px 'PingFang SC'`;
|
||||||
ctx.fillText(username, textX, textStartY);
|
ctx.fillText(username, textX, textStartY);
|
||||||
|
|
||||||
ctx.font = `${fontSizeDesc}px 'PingFang SC'`;
|
ctx.font = `${fontWeight === "bold" ? "bold " : ""}${fontSizeDesc}px 'PingFang SC'`;
|
||||||
ctx.globalAlpha = 0.6;
|
ctx.globalAlpha = 0.8;
|
||||||
ctx.fillText(desc, textX, textStartY + fontSizeName + 4);
|
ctx.fillText(desc, textX, textStartY + fontSizeName + 4);
|
||||||
ctx.globalAlpha = 1;
|
ctx.globalAlpha = 1;
|
||||||
}
|
}
|
||||||
@@ -1942,6 +1972,30 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
|
|||||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.weight-options {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.weight-btn {
|
||||||
|
flex: 1;
|
||||||
|
height: 70rpx;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
border: 2rpx solid transparent;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.weight-btn.active {
|
||||||
|
background: #fff5f5;
|
||||||
|
color: #ff3b30;
|
||||||
|
border-color: #ff3b30;
|
||||||
|
}
|
||||||
|
|
||||||
/* 按钮区 */
|
/* 按钮区 */
|
||||||
.main-actions {
|
.main-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -134,7 +134,7 @@ onShareAppMessage(async (options) => {
|
|||||||
title: "我刚做了一张祝福卡片,送给你",
|
title: "我刚做了一张祝福卡片,送给你",
|
||||||
path: "/pages/detail/index?shareToken=" + shareToken,
|
path: "/pages/detail/index?shareToken=" + shareToken,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/13ec1134e6614feadeeaaa9ef21ea96e.png",
|
"https://file.lihailezzc.com/resource/b703cf78a970a65490d52213e4d7bf33.png",
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
const shareToken = await getShareToken("greeting_page", "");
|
const shareToken = await getShareToken("greeting_page", "");
|
||||||
@@ -142,7 +142,7 @@ onShareAppMessage(async (options) => {
|
|||||||
title: "新春祝福",
|
title: "新春祝福",
|
||||||
path: `/pages/index/index?shareToken=${shareToken}`,
|
path: `/pages/index/index?shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/cfed2edbfa19250b836a87a4bbf0d5ad.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -172,7 +172,7 @@ onShareAppMessage(() => {
|
|||||||
title: "新年好运已送达 🎊|祝福卡·头像·壁纸",
|
title: "新年好运已送达 🎊|祝福卡·头像·壁纸",
|
||||||
path: "/pages/index/index",
|
path: "/pages/index/index",
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/cfed2edbfa19250b836a87a4bbf0d5ad.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -120,7 +120,7 @@ onShareAppMessage(async (options) => {
|
|||||||
title: "新春祝福",
|
title: "新春祝福",
|
||||||
path: `/pages/index/index?shareToken=${shareToken}`,
|
path: `/pages/index/index?shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/cfed2edbfa19250b836a87a4bbf0d5ad.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user