有时候,我们需要显示一个许多用户组合的一个头像,像扣扣的讨论组头像,微信的群头像,下面是一个简单的实现方法:
首先,获取你需要的头像图片地址,保存在一个对象里面,例如:
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开始画:
function drawing(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页面执行之前执行,不然显示不出来的哦
这是效果: