怎樣用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");
}