有时候，我们须要显现一个很多用户组合的一个头像，像扣扣的讨论组头像，微信的群头像，下面是一个简朴的完成要领：
起首，猎取你须要的头像图片地点，保存在一个对象内里，比方：
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");
}