Uniapp实现微信群聊头像|九宫格合并图片

注意由于微信小程序的安全限制，我们无法直接加载外部图片。因此，在实际应用中，需要先将头像图片下载到本地，然后再将它们加载到画布上。另外，如果头像图片数量不足9张，需要根据实际情况调整九宫格的排列方式。

基本使用

1.创建一个canvas画布，并设置画布的大小和样式。

<template><view class="box"><canvas canvas-id="avatar" style="width:300rpx;height:300rpx" ></canvas></view>
</template>

2.获取所有用户的头像图片地址，并将它们存储在一个数组中

 // 头像图片数组const avatarUrls = ['../../static/1.jpg','../../static/2.jpg','../../static/3.jpg','../../static/4.jpg','../../static/5.jpg','../../static/6.jpg','../../static/7.jpg','../../static/8.jpg','../../static/9.jpg',];

3.将头像图片加载到画布上，并按照九宫格的方式排列。可以使用for循环来遍历头像图片数组，并根据每个头像图片的位置计算出它在画布上的坐标

4.将所有头像图片绘制到画布上，并保存为一张新的图片

<script>export default {data() {return {}},onLoad() {},methods: {},mounted() {const ctx = uni.createCanvasContext('avatar', this);// 头像图片数组const avatarUrls = ['../../static/1.jpg','../../static/2.jpg','../../static/3.jpg','../../static/4.jpg','../../static/5.jpg','../../static/6.jpg','../../static/7.jpg','../../static/8.jpg','../../static/9.jpg',];// 计算每个头像图片在画布上的坐标const avatarSize = 100;const padding = 1;//图片之间的边距for (let i = 0; i < avatarUrls.length; i++) {const row = Math.floor(i / 3);const col = i % 3;const x = col * (avatarSize + padding);const y = row * (avatarSize + padding);ctx.drawImage(avatarUrls[i], x, y, avatarSize, avatarSize);}// 将所有头像图片绘制到画布上，并保存为一张新的图片ctx.draw(false, () => {uni.canvasToTempFilePath({canvasId: 'avatar',success: (res) => {console.log(res.tempFilePath);},}, this);});},}
</script>

设置整体圆角

<template><view class="box"><canvas canvas-id="avatar" class="avatar-canvas" ></canvas></view>
</template><script>export default {data() {return {}},onLoad() {},methods: {},mounted() {const ctx = uni.createCanvasContext('avatar', this);// 头像图片数组const avatarUrls = ['../../static/1.jpg','../../static/2.jpg','../../static/3.jpg','../../static/4.jpg','../../static/5.jpg','../../static/6.jpg','../../static/7.jpg','../../static/8.jpg','../../static/9.jpg',];// 计算每个头像图片在画布上的坐标const avatarSize = 100;const padding = 1;//图片之间的边距for (let i = 0; i < avatarUrls.length; i++) {const row = Math.floor(i / 3);const col = i % 3;const x = col * (avatarSize + padding);const y = row * (avatarSize + padding);ctx.drawImage(avatarUrls[i], x, y, avatarSize, avatarSize);}// 将所有头像图片绘制到画布上，并保存为一张新的图片ctx.draw(false, () => {uni.canvasToTempFilePath({canvasId: 'avatar',success: (res) => {console.log(res.tempFilePath);},}, this);});},}
</script><style>.box{width: 300px;height: 300px;border-radius: 50rpx;overflow: hidden;}.avatar-canvas{width: 100%;height: 100%;background-color: #fff;}
</style>

Uniapp实现微信群聊头像|九宫格合并图片相关推荐

java 头像微信群_Android仿微信群聊头像
工作中需要实现仿钉钉群头像的一个功能,就是个人的头像拼到一起显示,看了一下市场上的APP好像微信的群聊头像是组合的,QQ的头像不是,别的好像也没有了. 给大家分享一下怎么实现的吧.首先我们先看一下效果 ...
Android 高仿微信群聊头像
最近小编搞了一个仿微信群聊头像的一个功能,分享给大家... 工作中需要实现仿钉钉群头像的一个功能,就是个人的头像拼到一起显示,看了一下市场上的APP好像微信的群聊头像是组合的,QQ的头像不是,别的好像 ...
IM群聊头像九宫格实现方式
最近一直在做与IM相关的项目,所以就遇到了群聊头像九宫格的问题. 具体思路: 1:创建ContentView:vi用来显示九宫格头像布局. 2:循环加载头像并添加到vi布局中. 3:在所有头像全部加载 ...
android微信群聊功能,Android仿微信群聊头像效果
在网上找了些仿微信群聊头像的开源库后,发现没特别好用的,或者说满足我需求的,就只好在别人的基础上改了下,也就有了这样的自定义控件了,以此来实现微信群聊头像的效果,效果图如下所示: 主要实现: 一.自定 ...
Android 仿微信群聊头像
在网上找了些仿微信群聊头像的开源库后,发现没特别好用的,或者说满足我需求的,就只好在别人的基础上改了下,也就有了这样的自定义控件了,以此来实现微信群聊头像的效果,效果图如下所示: 主要实现: 一.自定 ...
android 仿微信群聊头像合成图片
android 仿微信群聊头像合成图片,微信中可以显示出群头像为多个用户的头像网格,这里讲方法已经封装好, 如果有记得点赞哦!! 先看效果: 使用例子: @Override public void ...
Android仿微信群聊头像合成
最近碰见仿照微信头像的需求,提供多个url的组合头像,做成微信群聊一样的头像,网上查了下,有两类,一种是合成的,一种是多个view合并展示的,合成的做的感觉很简陋,不太满足需求,多个view拼接的,在 ...
仿微信群聊头像（图像合成、缩放）
最近群里面有人问,微信群聊的头像是怎么实现的,就花了半个小时写了一个demo,今天又优化了一下,写个博客分享一下. 先上效果图原理原理比较简单,就是用画布(canvas)把九张图片合成一张图,然后 ...
环信群列表 php,一行代码实现群聊头像（用环信仿微信群聊头像）
做这个环信群聊头像的时候,我在考虑怎么自定义,怎么去拼接这个群聊头像,怎么获取群成员的头像,怎么在群成员退出群聊的时候更新头像,,, 群聊的东西真的很多,最近刚刚弄完群聊头像,并没有考虑到退出的时候怎 ...

Uniapp实现微信群聊头像|九宫格合并图片

基本使用

设置整体圆角

Uniapp实现微信群聊头像|九宫格合并图片相关推荐

最新文章

热门文章