怎樣用js結(jié)合h5畫出多頭像組合頭像

Forest10 發(fā)布于2019-08-01 17:07 / 3008人閱讀

摘要：有時(shí)候，我們需要顯示一個(gè)許多用戶組合的一個(gè)頭像，像扣扣的討論組頭像，微信的群頭像，下面是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)方法首先，獲取你需要的頭像圖片地址，保存在一個(gè)對(duì)象里面，例如然后可以限定組合圖片的最大個(gè)數(shù)，比如限定四個(gè)，那么久判斷數(shù)據(jù)庫里的圖片個(gè)數(shù)是否

有時(shí)候，我們需要顯示一個(gè)許多用戶組合的一個(gè)頭像，像扣扣的討論組頭像，微信的群頭像，下面是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)方法：

首先，獲取你需要的頭像圖片地址，保存在一個(gè)對(duì)象里面，例如：

var data = []; 然后可以限定組合圖片的最大個(gè)數(shù)，比如限定四個(gè)，那么久判斷數(shù)據(jù)庫里的圖片個(gè)數(shù)是否大于4，如果大于4，那么就取前四個(gè)，如果不大于4，那么就取完。

隨后，看注釋：

var base64 = []; //用來裝合成的圖片

var c = document_createElement_x_x("canvas"); //創(chuàng)建一個(gè)canvas

var ctx = c.getContext("2d");//返回一個(gè)用于在畫布上繪圖的2維環(huán)境

var len = data.length; //獲取需要組合的頭像圖片的張數(shù)

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"; //設(shè)置矩形顏色

ctx.fill(); //關(guān)閉并填充該路徑

接下來就需要寫一個(gè)function開始畫：

?functiondrawing(n){

      //參數(shù)n是傳入的是數(shù)字，0表示畫第一張圖片，1表示第二張。在這里先根據(jù)不同的需求設(shè)置a,b的大小?，我在這里是4張圖是極限，設(shè)置的是，n=0時(shí)a=b=40;n=1時(shí)a=150,b=40,n=2時(shí)a=40,b=150,n=3時(shí)a=b=150

?       if(n < len){//當(dāng)n<需要組合頭像圖片個(gè)數(shù)時(shí)就不再重復(fù)這個(gè)函數(shù)

             var img = new Image();? //創(chuàng)建一個(gè)image對(duì)象

              img.src = data[n];//將圖片地址賦值給image對(duì)象的src

              img.onload = function(){//圖片預(yù)加載

                    ctx.drawImage(img, a, b, 100, 100); //在畫布上繪制image對(duì)象的圖片

                     drawing(n+ 1); //再執(zhí)行此函數(shù)

             }?

       }else{ //如果執(zhí)行完了，也就是都畫完了，就要顯示畫好的圖像

             base64.push(c.toDataURL("image/jpg")); //將畫好的圖像放入base64對(duì)象

             //這里可以寫一個(gè)返回這個(gè)對(duì)象，也可以把base64賦值給一個(gè)全局變量

       }

}??

最后，執(zhí)行這個(gè)function:

drawing(0);?

完成操作，在html頁面中的img的src里面引用base64的值，就可以顯示出來了，但是要注意，這段js要在html頁面執(zhí)行之前執(zhí)行，不然顯示不出來的哦

這是效果：

在這里封裝好了一個(gè)js：

function groupPic(Images, imgId)
{
    //Images是圖片地址數(shù)組，imgId是html頁面的img標(biāo)簽的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");
}

GPU云服務(wù)器云服務(wù)器兩者怎樣結(jié)合 js畫出表格數(shù)據(jù)庫結(jié)合什么用 js 像json中添加數(shù)據(jù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/50961.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Forest10

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

flex布局示例代碼二

閱讀 1650·2019-08-30 15:44
JavaScript 實(shí)現(xiàn) iOS 下的計(jì)算器

閱讀 2572·2019-08-30 11:19
「譯」Flexbox 基本原理

閱讀 406·2019-08-30 11:06
Codepen 每周精選：值得收藏的24個(gè)頁面特效（2018-5-21）

閱讀 1567·2019-08-29 15:27
簡(jiǎn)單說通過JS的隱式轉(zhuǎn)換，關(guān)鍵時(shí)刻救你一命

閱讀 3084·2019-08-29 13:44
網(wǎng)站代碼優(yōu)化

閱讀 1629·2019-08-28 18:28
CSS 尺寸

閱讀 2357·2019-08-28 18:17
【Vue原理】Compile - 源碼版之 Parse 主要流程

閱讀 1987·2019-08-26 10:41

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

怎樣用js結(jié)合h5畫出多頭像組合頭像

相關(guān)文章