duanhao/SocialNetworks_duan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

图片-2

Browse Source
This commit is contained in:
duanhao 2025-07-30 16:57:35 +08:00
parent 450852ebdf
commit ee0c2fadf7
3 changed files with 44 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/store/llinkPrediction/index.js
View File

@ -444,7 +444,6 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
...item,
count: res.data.communityStatistics[item.key]
}))
this.timeList = res.data.timeList || []
this.communityDetailNodeList = res.data.userRelation
},

85
src/utils/transform.js
View File

@ -1,32 +1,31 @@
import dayjs from "dayjs"
import defaultAvatar from "@/assets/images/avatar/default.png"
import dayjs from "dayjs";
// 将图片裁剪为圆形并在四周添加透明padding后返回 base64
export function cropImageToCircle(url, size = 100, paddingRatio = 0.25) {
return new Promise((resolve) => {
const img = new window.Image()
img.crossOrigin = "anonymous"
const img = new window.Image();
img.crossOrigin = "anonymous";
img.onload = function () {
const padding = size * paddingRatio
const canvasSize = size + padding * 2
const canvas = document.createElement("canvas")
canvas.width = canvasSize
canvas.height = canvasSize
const ctx = canvas.getContext("2d")
ctx.clearRect(0, 0, canvasSize, canvasSize)
ctx.save()
ctx.beginPath()
ctx.strokeStyle = "#efa7a7" // 边框颜色
context.lineWidth = 10 // 边框宽度
ctx.arc(canvasSize / 2, canvasSize / 2, size / 2, 0, Math.PI * 2, false)
ctx.closePath()
ctx.clip()
ctx.drawImage(img, padding, padding, size, size)
ctx.restore()
resolve(canvas.toDataURL("image/png"))
}
img.src = url
})
const padding = size * paddingRatio;
const canvasSize = size + padding * 2;
const canvas = document.createElement("canvas");
canvas.width = canvasSize;
canvas.height = canvasSize;
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvasSize, canvasSize);
ctx.save();
ctx.beginPath();
ctx.strokeStyle = "#efa7a7"; // 边框颜色
context.lineWidth = 10; // 边框宽度
ctx.arc(canvasSize / 2, canvasSize / 2, size / 2, 0, Math.PI * 2, false);
ctx.closePath();
ctx.clip();
ctx.drawImage(img, padding, padding, size, size);
ctx.restore();
resolve(canvas.toDataURL("image/png"));
};
img.src = url;
});
}
/**
@ -37,32 +36,32 @@ export function cropImageToCircle(url, size = 100, paddingRatio = 0.25) {
*/
export async function cropToCircleAsync(imageSrc, diameter = 50) {
return new Promise((resolve, reject) => {
const img = new window.Image()
img.crossOrigin = "anonymous"
const img = new window.Image();
img.crossOrigin = "anonymous";
img.onload = function () {
const canvas = document.createElement("canvas")
canvas.width = diameter
canvas.height = diameter
const ctx = canvas.getContext("2d")
const canvas = document.createElement("canvas");
canvas.width = diameter;
canvas.height = diameter;
const ctx = canvas.getContext("2d");
ctx.beginPath()
ctx.arc(diameter / 2, diameter / 2, diameter / 2, 0, Math.PI * 2)
ctx.closePath()
ctx.clip()
ctx.beginPath();
ctx.arc(diameter / 2, diameter / 2, diameter / 2, 0, Math.PI * 2);
ctx.closePath();
ctx.clip();
ctx.drawImage(img, 0, 0, diameter, diameter)
resolve(canvas.toDataURL("image/png"))
}
img.onerror = reject
img.src = imageSrc
})
ctx.drawImage(img, 0, 0, diameter, diameter);
resolve(canvas.toDataURL("image/png"));
};
img.onerror = reject;
img.src = imageSrc;
});
}
//转换时间戳
export function TansTimestamp(timestamp, format = "YYYY-MM-DD HH:mm:ss") {
if (!timestamp) return
const ts = timestamp.toString().length === 10 ? timestamp * 1000 : timestamp
return dayjs(ts).format(format)
if (!timestamp) return;
const ts = timestamp.toString().length === 10 ? timestamp * 1000 : timestamp;
return dayjs(ts).format(format);
}
//将后端返回的二进制数据转换成所需的头像格式

3
src/views/LinkPrediction/socialGroups/components/userPanel.vue
View File

@ -16,7 +16,7 @@
<div class="group-type-content">TOP{{ index+1 }}</div>
</div>
<div class="user-list-item" v-for="child in group.list" :key="child.id">
<img :src="defaultAvatar" alt="" class="avatar" />
<img :src="child.avatarData ? getAvatarUrl(child.avatarData) : defaultAvatar" alt="" class="avatar" />
<div class="user-info">
<div class="username">{{ child.userName }}</div>
<div class="userState">
@ -41,6 +41,7 @@
import { defineProps, defineEmits, ref } from "vue";
import defaultAvatar from "@/assets/images/avatar/default.png";
import { useSocialGroupsStore } from "@/store/llinkPrediction/index";
import { getAvatarUrl } from "@/utils/transform"
const socialGroupsStore = useSocialGroupsStore()
const curUserGroupIndex = ref(0);
const emit = defineEmits(["click:selectedGroup"]);