怎樣用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開始畫：

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頁面執行之前執行，不然顯示不出來的哦

這是效果：

中間那個就是2張圖合成的效果