diff --git a/src/store/llinkPrediction/index.js b/src/store/llinkPrediction/index.js index 5df1832..1909335 100644 --- a/src/store/llinkPrediction/index.js +++ b/src/store/llinkPrediction/index.js @@ -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 }, diff --git a/src/utils/transform.js b/src/utils/transform.js index 9dfe7b7..53ffc4f 100644 --- a/src/utils/transform.js +++ b/src/utils/transform.js @@ -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); } //将后端返回的二进制数据转换成所需的头像格式 diff --git a/src/views/LinkPrediction/socialGroups/components/userPanel.vue b/src/views/LinkPrediction/socialGroups/components/userPanel.vue index 0664451..a908e2f 100644 --- a/src/views/LinkPrediction/socialGroups/components/userPanel.vue +++ b/src/views/LinkPrediction/socialGroups/components/userPanel.vue @@ -16,7 +16,7 @@
TOP{{ index+1 }}
- +
{{ child.userName }}
@@ -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"]);