怎样用js结合h5画出多头像组合头像

摘要：有时候，我们需要显示一个许多用户组合的一个头像，像扣扣的讨论组头像，微信的群头像，下面是一个简单的实现方法首先，获取你需要的头像图片地址，保存在一个对象里面，例如然后可以限定组合图片的最大个数，比如限定四个，那么久判断数据库里的图片个数是否

有时候，我们需要显示一个许多用户组合的一个头像，像扣扣的讨论组头像，微信的群头像，下面是一个简单的实现方法：

首先，获取你需要的头像图片地址，保存在一个对象里面，例如：

var data = []; 然后可以限定组合图片的最大个数，比如限定四个，那么久判断数据库里的图片个数是否大于4，如果大于4，那么就取前四个，如果不大于4，那么就取完。

随后，看注释：

var base64 = []; //用来装合成的图片

var c = document_createElement_x_x("canvas"); //创建一个canvas

var ctx = c.getContext("2d");//返回一个用于在画布上绘图的2维环境

var len = data.length; //获取需要组合的头像图片的张数

var a = 0; //初始化需要组合头像的长度

var b = 0; //初始化需要组合头像的宽度

c.width = 290; //定义canvas画布的宽度

c.height = 290; //定义canvas画布的高度

ctx.rect(0, 0, c.width, c.height); //画矩形

ctx.fillStyle = "#fff"; //设置矩形颜色

ctx.fill(); //关闭并填充该路径

接下来就需要写一个function开始画：

​functiondrawing(n){

      //参数n是传入的是数字，0表示画第一张图片，1表示第二张。在这里先根据不同的需求设置a,b的大小​，我在这里是4张图是极限，设置的是，n=0时a=b=40;n=1时a=150,b=40,n=2时a=40,b=150,n=3时a=b=150

​       if(n < len){//当n<需要组合头像图片个数时就不再重复这个函数

             var img = new Image();​ //创建一个image对象

              img.src = data[n];//将图片地址赋值给image对象的src

              img.onload = function(){//图片预加载

                    ctx.drawImage(img, a, b, 100, 100); //在画布上绘制image对象的图片

                     drawing(n+ 1); //再执行此函数

             }​

       }else{ //如果执行完了，也就是都画完了，就要显示画好的图像

             base64.push(c.toDataURL("image/jpg")); //将画好的图像放入base64对象

             //这里可以写一个返回这个对象，也可以把base64赋值给一个全局变量

       }

}​​

最后，执行这个function:

drawing(0);​

完成操作，在html页面中的img的src里面引用base64的值，就可以显示出来了，但是要注意，这段js要在html页面执行之前执行，不然显示不出来的哦

这是效果：

在这里封装好了一个js：

function groupPic(Images, imgId)
{
    //Images是图片地址数组，imgId是html页面的img标签的id属性值
    var base64 = [];
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    var len = Images.length;
    if (len > 9) {
        len = 9;
    }
    //len=8;
    var a = 0;
    var b = 0;

    var k = 80;
    var l = 80;
    if (len > 4) {
        k = 60;
        l = 60;
    }
    canvas.width = 290;
    canvas.height = 290;
    context.rect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "#fff";
    context.fill();
    function drawing(n) {
        if (n < len) {
            if (len <= 4) {
                if (len != 3) {
                    if (n == 0) {
                        a = b = 40;
                    } else if (n == 1) {
                        a = 130;
                        b = 40;
                    } else if (n == 2) {
                        a = 40;
                        b = 130;
                    } else if (n == 3) {
                        a = b = 130;
                    }
                } else {
                    if (n == 0) {
                        a = 75;
                        b = 40;

                    } else if (n == 1) {
                        a = 40;
                        b = 130;
                    } else if (n == 2) {
                        a = 130;
                        b = 130;
                    }
                }
            }
            if (len == 5) {
                if (n == 0) {
                    a = 70;
                    b = 40;

                } else if (n == 1) {
                    a = 140;
                    b = 40;
                } else if (n == 2) {
                    a = 40;
                    b = 110;
                } else if (n == 3) {
                    a = b = 110;
                } else {
                    a = 180;
                    b = 110;
                }
            }
            if (len == 6) {
                if (n == 0) {
                    a = 40;
                    b = 40;

                } else if (n == 1) {
                    a = 110;
                    b = 40;
                } else if (n == 2) {
                    a = 180;
                    b = 40;
                } else if (n == 3) {
                    a = 40;
                    b = 110;
                } else if (n == 4) {
                    a = b = 110
                } else {
                    a = 180;
                    b = 110;
                }
            }
            if (len == 7) {
                if (n == 0) {
                    a = 110;
                    b = 40;

                } else if (n == 1) {
                    a = 40;
                    b = 110;
                } else if (n == 2) {
                    a = 110;
                    b = 110;
                } else if (n == 3) {
                    a = 180;
                    b = 110;
                } else if (n == 4) {
                    a = 40;
                    b = 180;
                } else if (n == 5) {
                    a = 110;
                    b = 180;
                } else {
                    a = b = 180;
                }
            }
            if (len == 8) {
                if (n == 0) {
                    a = 70;
                    b = 40;

                } else if (n == 1) {
                    a = 140;
                    b = 40;
                } else if (n == 2) {
                    a = 40;
                    b = 110;
                } else if (n == 3) {
                    a = 110;
                    b = 110;
                } else if (n == 4) {
                    a = 180;
                    b = 110;
                } else if (n == 5) {
                    a = 40;
                    b = 180;
                } else if (n == 6) {
                    a = 110;
                    b = 180;
                } else {
                    a = b = 180;
                }
            }
            if (len == 9) {
                if (n == 0) {
                    a = 40;
                    b = 40;

                } else if (n == 1) {
                    a = 110;
                    b = 40;
                } else if (n == 2) {
                    a = 180;
                    b = 40;
                } else if (n == 3) {
                    a = 40;
                    b = 110;
                } else if (n == 4) {
                    a = 110;
                    b = 110;
                } else if (n == 5) {
                    a = 180;
                    b = 110;
                } else if (n == 6) {
                    a = 40;
                    b = 180;
                } else if (n == 7) {
                    a = 110;
                    b = 180;
                } else {
                    a = b = 180;
                }
            }
            var img = new Image();
            img.src = Images[n];
            img.onload = function(){
                context.drawImage(img, a, b, k, l);
                drawing(n + 1);
            }
        } else {
            base64.push(canvas.toDataURL("image/jpg"));
            document.getElementById(imgId).src = base64[0];
        }
    }
    drawing(0);
}

使用方法：在html页面中添加下面的js:

window.onload = function(){
    var Images = ["1.jpg","2.jpg","3.jpg","4.jpg"];
    var fun = groupPic;
    fun(Images, "imageId");
}