1.效果图：如下

C#版本

JS 版本

2，C#代码，

  const int fourSidedPixels = 134;       /// <summary>/// 合成四边形图片/// </summary>/// <param name="files">图片集合</param>/// <param name="outPath">输出地址</param>public static void CreateFourSidedImage(string[] files, string outPath){String[] imageSize = GetXy(files.Length);int width = GetWidth(files.Length);if (imageSize.Length == 0){throw new KeyNotFoundException("文件不能为空");// IOException("Not found the images:" + sourcePath);}using (Bitmap bitmap = new Bitmap(fourSidedPixels, fourSidedPixels)){using (Graphics g = Graphics.FromImage(bitmap)){///设置透明背景g.Clear(Color.Transparent);for (int i = 0; i < imageSize.Length; i++){String size = imageSize[i];String[] sizeArr = size.Split(',');int x = int.Parse(sizeArr[0]);int y = int.Parse(sizeArr[1]);using (Bitmap setSmailImage = new Bitmap(files[i])){using (Bitmap newImage = new Bitmap((int)(width), (int)(width))){float w = (float)(width * 0.05);//边框的宽度，可取任意值using (Graphics gr = Graphics.FromImage(newImage)){using (Pen pen = new Pen(Color.White, w))  //加入白色边框 {gr.DrawImage(setSmailImage, 0, 0, Math.Abs(width), Math.Abs(width)); //先将图片构建好gr.DrawRectangle(pen, new Rectangle(0, 0, Math.Abs(width), Math.Abs(width)));//加边框//gr.DrawEllipse(pen, new Rectangle(0, 0, Math.Abs(width), Math.Abs(width))); //加椭圆边框//setSmailImage.Dispose();//gr.Dispose();g.DrawImage(newImage, new Rectangle(x, y, Math.Abs(width), Math.Abs(width)));}}}}}using (Image image = new Bitmap(bitmap)){if (File.Exists(outPath))File.Delete(outPath);image.Save(outPath, ImageFormat.Png);}}}}/// <summary>/// 计算图片绘制时的XY点/// </summary>/// <param name="size"></param>/// <returns></returns>public static String[] GetXy(int size){if (size == 0 || size > 9){return null;}String[] s = new String[size];int _x = 0;int _y = 0;if (size == 1){_x = _y = 6;s[0] = "6,6";}if (size == 2){_x = _y = 4;s[0] = "4," + (132 / 2 - 60 / 2);s[1] = 60 + 2 * _x + "," + (132 / 2 - 60 / 2);}if (size == 3){_x = _y = 4;s[0] = (132 / 2 - 60 / 2) + "," + _y;s[1] = _x + "," + (60 + 2 * _y);s[2] = (60 + 2 * _y) + "," + (60 + 2 * _y);}if (size == 4){_x = _y = 4;s[0] = _x + "," + _y;s[1] = (_x * 2 + 60) + "," + _y;s[2] = _x + "," + (60 + 2 * _y);s[3] = (60 + 2 * _y) + "," + (60 + 2 * _y);}if (size == 5){_x = _y = 3;s[0] = (132 - 40 * 2 - _x) / 2 + "," + (132 - 40 * 2 - _y) / 2;s[1] = ((132 - 40 * 2 - _x) / 2 + 40 + _x) + "," + (132 - 40 * 2 - _y) / 2;s[2] = _x + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);s[3] = (_x * 2 + 40) + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);s[4] = (_x * 3 + 40 * 2) + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);}if (size == 6){_x = _y = 3;s[0] = _x + "," + ((132 - 40 * 2 - _x) / 2);s[1] = (_x * 2 + 40) + "," + ((132 - 40 * 2 - _x) / 2);s[2] = (_x * 3 + 40 * 2) + "," + ((132 - 40 * 2 - _x) / 2);s[3] = _x + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);s[4] = (_x * 2 + 40) + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);s[5] = (_x * 3 + 40 * 2) + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);}if (size == 7){_x = _y = 3;s[0] = (132 - 40) / 2 + "," + _y;s[1] = _x + "," + (_y * 2 + 40);s[2] = (_x * 2 + 40) + "," + (_y * 2 + 40);s[3] = (_x * 3 + 40 * 2) + "," + (_y * 2 + 40);s[4] = _x + "," + (_y * 3 + 40 * 2);s[5] = (_x * 2 + 40) + "," + (_y * 3 + 40 * 2);s[6] = (_x * 3 + 40 * 2) + "," + (_y * 3 + 40 * 2);}if (size == 8){_x = _y = 3;s[0] = (132 - 80 - _x) / 2 + "," + _y;s[1] = ((132 - 80 - _x) / 2 + _x + 40) + "," + _y;s[2] = _x + "," + (_y * 2 + 40);s[3] = (_x * 2 + 40) + "," + (_y * 2 + 40);s[4] = (_x * 3 + 40 * 2) + "," + (_y * 2 + 40);s[5] = _x + "," + (_y * 3 + 40 * 2);s[6] = (_x * 2 + 40) + "," + (_y * 3 + 40 * 2);s[7] = (_x * 3 + 40 * 2) + "," + (_y * 3 + 40 * 2);}if (size == 9){_x = _y = 3;s[0] = _x + "," + _y;s[1] = _x * 2 + 40 + "," + _y;s[2] = _x * 3 + 40 * 2 + "," + _y;s[3] = _x + "," + (_y * 2 + 40);s[4] = (_x * 2 + 40) + "," + (_y * 2 + 40);s[5] = (_x * 3 + 40 * 2) + "," + (_y * 2 + 40);s[6] = _x + "," + (_y * 3 + 40 * 2);s[7] = (_x * 2 + 40) + "," + (_y * 3 + 40 * 2);s[8] = (_x * 3 + 40 * 2) + "," + (_y * 3 + 40 * 2);}return s;}/// <summary>/// 计算当个图片的宽度/// </summary>/// <param name="size"></param>/// <returns></returns>public static int GetWidth(int size){int width = 0;if (size == 1){width = 120;}if (size > 1 && size <= 4){width = 60;}if (size >= 5){width = 40;}return width;}

2.1，使用，以及，后期网络图片流方法

 static void Main(string[] args){//string imgsrc = "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKibbDEP3NvdXT5dB7Xn30oUEicyrEscYnzDwXD8RSUNFzWrqib6myxibF74uhW0cWTeF1EZyN6IdBY5w/132";//tpl(imgsrc);//return;string[] fArr ={@"G:\01.jpg",@"G:\02.JPG",@"G:\03.jpg",@"G:\04.jpg",@"G:\05.jpg",@"G:\06.jpg",@"G:\07.jpg",@"G:\08.jpg",@"G:\09.jpg"};string savaImgPath = $"D:\\g{fArr.Length}.png";CreateFourSidedImage(fArr, savaImgPath);Console.ReadKey();}      #region 读取网络图片流public static void tpl(string imgsrc){try{WebRequest myrequest = WebRequest.Create(imgsrc);//前台js传的path，可以是远程服务器上的，也可以是本地的WebResponse myresponse = myrequest.GetResponse();Stream imgstream = myresponse.GetResponseStream();System.Drawing.Image img = System.Drawing.Image.FromStream(imgstream);MemoryStream ms = new MemoryStream();img.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);//context.Response.AddHeader("Content-Length", ms.Length.ToString());//context.Response.Clear();//context.Response.ContentType = "image/jpeg";//context.Response.BinaryWrite(ms.ToArray());//context.Response.OutputStream.Flush();//context.Response.OutputStream.Close();using (Bitmap bmp1 = (Bitmap)Image.FromStream(ms)){using (Image image = new Bitmap(bmp1)){image.Save(@"D:\\g00.png", ImageFormat.Jpeg);}}}catch (Exception ex){Trace.WriteLine("读取图片异常");throw ex;}}#endregion

3，JS版本

3.1 由于图片会因为没有加载，所有将图片先用html加载，否则点击第一次没效果，后续才有效果

<html><head><style>.imgId img{width: 50;height: 50;}</style></head><body><div class="imgId" ><img src="https://www.pic1.jzbl.com/buildingcircle/2d0f0642-0f54-412a-a830-cb0b5828ce90/2020-04-15/i/1586922358353319.jpg"alt=""><img src="https://www.pic1.jzbl.com/buildingcircle/2d0f0642-0f54-412a-a830-cb0b5828ce90/2020-04-15/i/1586922358353319.jpg"alt=""><img src="https://www.pic1.jzbl.com/buildingcircle/2d0f0642-0f54-412a-a830-cb0b5828ce90/2020-04-15/i/1586922358353319.jpg"alt=""><img src="https://newoss.zhulong.com/edu/202004/13/56/164056pnvm5ljknwvqphuv.jpg" alt=""><img src="https://www.pic1.jzbl.com/buildingcircle/2d0f0642-0f54-412a-a830-cb0b5828ce90/2020-04-15/i/1586922358353319.jpg"alt=""></div><a href="javascript:;" class="btn" title=""> 绘制按钮 </a><canvas id="myCanvas"></canvas></body></html>

3.2，JS代码

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>var mycars = new Array();at = document.querySelectorAll(".imgId img")for (let index = 0; index < at.length; index++) {mycars.push($(at[index]).attr("src"));}// mycars[0] = "https://www.pic1.jzbl.com/buildingcircle/2d0f0642-0f54-412a-a830-cb0b5828ce90/2020-04-15/i/1586922358353319.jpg";// mycars[1] = "https://www.pic1.jzbl.com/buildingcircle/2d0f0642-0f54-412a-a830-cb0b5828ce90/2020-04-15/i/1586922358359926.jpg";// mycars[2] = "https://www.pic1.jzbl.com/buildingcircle/2d0f0642-0f54-412a-a830-cb0b5828ce90/2020-04-15/i/1586922358354298.jpg";// mycars[3] = "https://newoss.zhulong.com/edu/202004/13/56/164056pnvm5ljknwvqphuv.jpg";var fourSidedPixels = 134;$('.btn').click(function () {var canvasList = document.getElementById('lineArea');var canvas = document.getElementById("myCanvas");ctx = canvas.getContext("2d");canvas.width = fourSidedPixels;canvas.height = fourSidedPixels;// 制作透明背景图ctx.rect(0, 0, fourSidedPixels, fourSidedPixels);ctx.fillStyle = 'rgba(255, 255, 255, 0)';ctx.fill();var cwidth = GetWidth(mycars.length);console.log(cwidth);var Xy = GetXy(mycars.length);for (let index = 0; index < Xy.length; index++) {var element = Xy[index];var sizeArr = element.split(',');var x = Number(sizeArr[0]);var y = Number(sizeArr[1]);debuggerlet cvs = document.createElement('canvas');let ct = cvs.getContext('2d');cvs.width = cwidth;cvs.height = cwidth;var ctimg = new Image();// ctimg.src = cvs.toDataURL("image/png");//绘制到小图ct.drawImage(ctimg, 0, 0, cwidth, cwidth);ctimg.onload = function () {ct.drawImage(ctimg, 0, 0, cwidth, cwidth);}ctimg.src = mycars[index];// 绘制边框（无效）// ct.beginPath();// ct.rect(0, 0, cwidth - 2, cwidth - 2);// ct.lineWidth = 5;// // ct.fillStyle = 'white';// // ct.fill();// ct.strokeStyle = 'red';// ct.stroke();//绘制到大图上ctx.drawImage(ctimg, x, y, cwidth, cwidth);}});function GetXy(size) {if (size == 0 || size > 9) {return null;}var s = new Array(size);//  String[] s = new String[size];var _x = 0;var _y = 0;if (size == 1) {_x = _y = 6;s[0] = "6,6";}if (size == 2) {_x = _y = 4;s[0] = "4," + (132 / 2 - 60 / 2);s[1] = 60 + 2 * _x + "," + (132 / 2 - 60 / 2);}if (size == 3) {_x = _y = 4;s[0] = (132 / 2 - 60 / 2) + "," + _y;s[1] = _x + "," + (60 + 2 * _y);s[2] = (60 + 2 * _y) + "," + (60 + 2 * _y);}if (size == 4) {_x = _y = 4;s[0] = _x + "," + _y;s[1] = (_x * 2 + 60) + "," + _y;s[2] = _x + "," + (60 + 2 * _y);s[3] = (60 + 2 * _y) + "," + (60 + 2 * _y);}if (size == 5) {_x = _y = 3;s[0] = (132 - 40 * 2 - _x) / 2 + "," + (132 - 40 * 2 - _y) / 2;s[1] = ((132 - 40 * 2 - _x) / 2 + 40 + _x) + "," + (132 - 40 * 2 - _y) / 2;s[2] = _x + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);s[3] = (_x * 2 + 40) + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);s[4] = (_x * 3 + 40 * 2) + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);}if (size == 6) {_x = _y = 3;s[0] = _x + "," + ((132 - 40 * 2 - _x) / 2);s[1] = (_x * 2 + 40) + "," + ((132 - 40 * 2 - _x) / 2);s[2] = (_x * 3 + 40 * 2) + "," + ((132 - 40 * 2 - _x) / 2);s[3] = _x + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);s[4] = (_x * 2 + 40) + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);s[5] = (_x * 3 + 40 * 2) + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);}if (size == 7) {_x = _y = 3;s[0] = (132 - 40) / 2 + "," + _y;s[1] = _x + "," + (_y * 2 + 40);s[2] = (_x * 2 + 40) + "," + (_y * 2 + 40);s[3] = (_x * 3 + 40 * 2) + "," + (_y * 2 + 40);s[4] = _x + "," + (_y * 3 + 40 * 2);s[5] = (_x * 2 + 40) + "," + (_y * 3 + 40 * 2);s[6] = (_x * 3 + 40 * 2) + "," + (_y * 3 + 40 * 2);}if (size == 8) {_x = _y = 3;s[0] = (132 - 80 - _x) / 2 + "," + _y;s[1] = ((132 - 80 - _x) / 2 + _x + 40) + "," + _y;s[2] = _x + "," + (_y * 2 + 40);s[3] = (_x * 2 + 40) + "," + (_y * 2 + 40);s[4] = (_x * 3 + 40 * 2) + "," + (_y * 2 + 40);s[5] = _x + "," + (_y * 3 + 40 * 2);s[6] = (_x * 2 + 40) + "," + (_y * 3 + 40 * 2);s[7] = (_x * 3 + 40 * 2) + "," + (_y * 3 + 40 * 2);}if (size == 9) {_x = _y = 3;s[0] = _x + "," + _y;s[1] = _x * 2 + 40 + "," + _y;s[2] = _x * 3 + 40 * 2 + "," + _y;s[3] = _x + "," + (_y * 2 + 40);s[4] = (_x * 2 + 40) + "," + (_y * 2 + 40);s[5] = (_x * 3 + 40 * 2) + "," + (_y * 2 + 40);s[6] = _x + "," + (_y * 3 + 40 * 2);s[7] = (_x * 2 + 40) + "," + (_y * 3 + 40 * 2);s[8] = (_x * 3 + 40 * 2) + "," + (_y * 3 + 40 * 2);}return s;}function GetWidth(size) {var width = 0;if (size == 1) {width = 120;}if (size > 1 && size <= 4) {width = 60;}if (size >= 5) {width = 40;}return width;}

4、总结：

通用的计算方法 GetXy(),和GetWidt();

js版本为实现加边框效果

5、感谢及学习于

https://www.jb51.net/article/165400.htm

zyn010101，他的是java版的

合成群组聊天头像，C# 版本和 js 版本相关推荐

仿微信做的一个群组聊天头像的功能
之前做过一个访微信头像的功能,现在贴出代码先在工程里放入对应的头像,然后装入一个数组传入方法里,接着画好xib对应的9宫格头像,里面用到了2个库,大家可以去网上下载 - (void)viewDi ...
Zulip 2.0.0 发布，功能强大的群组聊天软件
Zulip 2.0.0 已发布,Zulip 是一个强大的开源群组聊天软件. 用 Python 编写,使用 Django 框架,支持通过会话流的私人消息和群聊.Zulip 还支持快速搜索.拖放文件上传. ...
仿微信的群组九宫格头像
仿微信的群组九宫格头像 github地址:WeChatGroupAvatar 优点: 使用Bitmap合成的方式,而非九宫格里面具有九张图片.这样子的好处是对于图片加载不会出现一张张图片依次出现,刷新 ...
Zulip 2.0.3 发布，功能强大的群组聊天软件
百度智能云云生态狂欢季热门云产品1折起>>> Zulip 2.0.3 发布了,Zulip 是一个强大的开源群组聊天软件. 用 Python 编写,使用 Django 框架,支 ...
Zulip 2.0.1 发布，功能强大的群组聊天软件
开发四年只会写业务代码,分布式高并发都不会还做程序员? Zulip 2.0.1 发布了,Zulip 是一个强大的开源群组聊天软件. 用 Python 编写,使用 Django 框架,支持通过会话流 ...
聊天源码IM聊天室模板群组聊天app 即时通讯IM设计聊天
(此贴长期有效) 系统提供多种方式合作,支持源码转让/支持按年整体运维合作/支持行业定制开发,更多需求请联系我们团队Tel:15538001716 (V同) 独立IM:个性化定制,私有化部署,全功能 ...
聊天服务器-解密陌生人（11）群组管理和群组聊天
提示: 因为工程稍微有点大对我个人来说,所以可能在某些方面讲的不清楚或逻辑性不够强,如果有问题请@我. 原工程:https://github.com/LineChen/ 八.群组管理客户端可以发起多 ...
下载telegram群组聊天消息
下载telegram群组聊天消息及统计方案: 1 创建机器人在telegram应用里与BotFather交互创建机器人,参考链接:https://core.telegram.org/bots ...
telegram 下载群组聊天消息
下载telegram群组聊天消息及统计方案: 1 创建机器人在telegram应用里与BotFather交互创建机器人,参考链接:https://core.telegram.org/bots#6-b ...

合成群组聊天头像，C# 版本和 js 版本

1.效果图：如下

3，JS版本

合成群组聊天头像，C# 版本和 js 版本相关推荐

最新文章

热门文章

合成 群组聊天头像，C# 版本 和 js 版本

1.效果图：如下

3，JS版本

合成 群组聊天头像，C# 版本 和 js 版本相关推荐

最新文章

热门文章

合成群组聊天头像，C# 版本和 js 版本

合成群组聊天头像，C# 版本和 js 版本相关推荐