有时候，我们需要显示一个许多用户组合的一个头像，像扣扣的讨论组头像，微信的群头像，下面是一个简单的实现方法：
首先，获取你需要的头像图片地址，保存在一个对象里面，例如：
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");
}