How to use js combined with H5 to draw multi head combined head

Time:2021-3-10

Sometimes, we need to display an avatar of a combination of many users, such as the discussion group avatar of button and the group avatar of wechat. Here is a simple implementation method:

First, get the picture address you need and save it in an object, for example:

Var data = []; then you can limit the maximum number of combined pictures, such as four, so you can judge whether the number of pictures in the database is greater than 4, if it is greater than 4, then take the first four, if it is not greater than 4, then finish.

Next, look at the note:

Var Base64 = []; // used to load the composite image

var c = document_ createElement_ x_ X ('canvas'); // create a canvas

Var CTX = c.getcontext ('2d '); // returns a 2D environment for drawing on canvas

var len =  data.length ; // get the number of avatar images to be combined

Var a = 0; // initialization requires the length of the combined avatar

Var B = 0; // the width of the combined avatar is required for initialization

c. Width = 290; // defines the width of the canvas

c. Height = 290; // defines the height of the canvas

ctx.rect (0, 0, c.width, c.height); // draw a rectangle

ctx.fillStyle  ='# FFF'; // set the rectangle color

ctx.fill (); // close and fill the path

Next, you need to write a function to start drawing:

​functiondrawing(n){

      //The parameter n is the number passed in, 0 for the first picture and 1 for the second. Here, we first set the size of a and B according to different needs. Here are four graphs, which are the limits. We set a = b = 40 when n = 0; a = 150 when n = 1, B = 40, a = 40 when n = 2, B = 150 when n = 3, a = b = 150 when n = 3

If (n < len) {// this function will not be repeated when n < the number of avatar images needs to be combined

             Var img = new image(); // create an image object

              img.src  =Data [n]; // assign the image address to the SRC of the image object

              img.onload  =Function() {// picture preload

                    ctx.drawImage (IMG, a, B, 100, 100); // draw a picture of an image object on the canvas

                     Drawing (n + 1); // execute this function again

             }​

       }Else {// if the execution is finished, that is, all the drawings are finished, the finished image will be displayed

             Base64. Push (c.todataurl ("image / JPG"); // put the drawn image into the base64 object

             //Here you can write an object that returns this object, or you can assign Base64 to a global variable

       }

}​​

Finally, execute this function:

drawing(0);​

After the operation is completed, you can refer to the value of Base64 in the SRC of img in the HTML page, but note that this section of JS should be executed before the execution of the HTML page, otherwise it will not be displayed

This is the effect:

How to use js combined with H5 to draw multi head combined head

A JS is encapsulated here

function groupPic(Images, imgId)
{
    //Images is the image address array, and imgid is the ID attribute value of the IMG tag of the HTML page
    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);
}

Usage: add the following JS to the HTML page:

window.onload = function(){
    var Images = ["1.jpg","2.jpg","3.jpg","4.jpg"];
    var fun = groupPic;
    fun(Images, "imageId");
}

Recommended Today

SQL exercise 20 – Modeling & Reporting

This blog is used to review and sort out the common topic modeling architecture, analysis oriented architecture and integration topic reports in data warehouse. I have uploaded these reports to GitHub. If you are interested, you can have a lookAddress:https://github.com/nino-laiqiu/TiTanI recorded a relatively complete development process in my hexo blog deployed on GitHub. You can […]