history.push(`/group-member?id=${item.groupInfo.groupID}`)}>群成员
@@ -215,6 +221,10 @@ const ChatGroupList = () => {
dismissGroup(item)}>
解散群组
+
{
+ currnetItem.current = item;
+ setVisibleCode(true)
+ }}>二维码
)
}
@@ -276,6 +286,48 @@ const ChatGroupList = () => {
);
+ const downloadQRCode = () => {
+ // console.log(`https://share.buzz-up.io/g/join/${currnetItem.current.groupInfo.groupID}`);
+
+ const divElement = qrCodeDivRef.current;
+
+ // 创建一个 canvas 元素
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+
+ // 获取二维码的图片元素
+ const qrCanvas = divElement.querySelector('canvas'); // 通过查询二维码生成的 canvas
+
+ if (!qrCanvas) {
+ alert('二维码未加载!');
+ return;
+ }
+
+ // 设置 canvas 尺寸（二维码尺寸 + 文本高度 + 内边距）
+ const padding = 20;
+ canvas.width = qrCanvas.width + 2 * padding; // 宽度加两倍内边距
+ canvas.height = qrCanvas.height + 40 + 2 * padding; // 高度加文本高度和内边距
+
+ // 先填充背景为白色
+ ctx.fillStyle = '#fff';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ // 将二维码绘制到 canvas 上，考虑内边距
+ ctx.drawImage(qrCanvas, padding, padding);
+
+ // 绘制文本
+ ctx.font = '18px Arial';
+ ctx.textAlign = 'center';
+ ctx.fillStyle = '#000';
+ ctx.fillText(currnetItem.current.groupInfo.groupName, canvas.width / 2, qrCanvas.height + padding + 30); // 文本绘制在二维码下方
+
+ // 创建一个下载链接
+ const link = document.createElement('a');
+ link.href = canvas.toDataURL('image/png'); // 将 canvas 转换为图片的 Base64 格式
+ link.download = 'qrcode-with-text.png'; // 设置下载文件名
+ link.click(); // 自动点击链接以触发下载
+ };
+
// 用户头像 用户昵称 用户ID 性别 手机号 在线状态
return (
<>
@@ -439,6 +491,17 @@ const ChatGroupList = () => {
}
+
+ {visibleCode &&