合成 羣組聊天頭像，C# 版本 和 js 版本

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]);
            debugger

            let 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版的