资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/怎样用js结合h5画出多头像组合头像

怎样用js结合h5画出多头像组合头像

Eirunye / 1944人阅读

摘要：有时候，我们需要显示一个许多用户组合的一个头像，像扣扣的讨论组头像，微信的群头像，下面是一个简单的实现方法首先，获取你需要的头像图片地址，保存在一个对象里面，例如然后可以限定组合图片的最大个数，比如限定四个，那么久判断数据库里的图片个数是否

有时候，我们需要显示一个许多用户组合的一个头像，像扣扣的讨论组头像，微信的群头像，下面是一个简单的实现方法：

首先，获取你需要的头像图片地址，保存在一个对象里面，例如：

var data = []; 然后可以限定组合图片的最大个数，比如限定四个，那么久判断数据库里的图片个数是否大于4，如果大于4，那么就取前四个，如果不大于4，那么就取完。

随后，看注释：

</>复制代码 
  1. var base64 = []; //用来装合成的图片
  2. var c = document_createElement_x_x("canvas"); //创建一个canvas
  3. var ctx = c.getContext("2d");//返回一个用于在画布上绘图的2维环境
  4. var len = data.length; //获取需要组合的头像图片的张数
  5. var a = 0; //初始化需要组合头像的长度
  6. var b = 0; //初始化需要组合头像的宽度
  7. c.width = 290; //定义canvas画布的宽度
  8. c.height = 290; //定义canvas画布的高度
  9. ctx.rect(0, 0, c.width, c.height); //画矩形
  10. ctx.fillStyle = "#fff"; //设置矩形颜色
  11. ctx.fill(); //关闭并填充该路径

接下来就需要写一个function开始画：

</>复制代码 
  1. ​functiondrawing(n){
  2.       //参数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
  3. ​       if(n < len){//当n<需要组合头像图片个数时就不再重复这个函数
  4.              var img = new Image();​ //创建一个image对象
  5.               img.src = data[n];//将图片地址赋值给image对象的src
  6.               img.onload = function(){//图片预加载
  7.                     ctx.drawImage(img, a, b, 100, 100); //在画布上绘制image对象的图片
  8.                      drawing(n+ 1); //再执行此函数
  9.              }​
  10.        }else{ //如果执行完了，也就是都画完了，就要显示画好的图像
  11.              base64.push(c.toDataURL("image/jpg")); //将画好的图像放入base64对象
  12.              //这里可以写一个返回这个对象，也可以把base64赋值给一个全局变量
  13.        }
  14. }​​

最后，执行这个function:

</>复制代码 
  1. drawing(0);​

完成操作，在html页面中的img的src里面引用base64的值，就可以显示出来了，但是要注意，这段js要在html页面执行之前执行，不然显示不出来的哦

这是效果：

在这里封装好了一个js：

</>复制代码 
  1. function groupPic(Images, imgId)
  2. {
  3.     //Images是图片地址数组，imgId是html页面的img标签的id属性值
  4.     var base64 = [];
  5.     var canvas = document.createElement("canvas");
  6.     var context = canvas.getContext("2d");
  7.     var len = Images.length;
  8.     if (len > 9) {
  9.         len = 9;
  10.     }
  11.     //len=8;
  12.     var a = 0;
  13.     var b = 0;
  14.     var k = 80;
  15.     var l = 80;
  16.     if (len > 4) {
  17.         k = 60;
  18.         l = 60;
  19.     }
  20.     canvas.width = 290;
  21.     canvas.height = 290;
  22.     context.rect(0, 0, canvas.width, canvas.height);
  23.     context.fillStyle = "#fff";
  24.     context.fill();
  25.     function drawing(n) {
  26.         if (n < len) {
  27.             if (len <= 4) {
  28.                 if (len != 3) {
  29.                     if (n == 0) {
  30.                         a = b = 40;
  31.                     } else if (n == 1) {
  32.                         a = 130;
  33.                         b = 40;
  34.                     } else if (n == 2) {
  35.                         a = 40;
  36.                         b = 130;
  37.                     } else if (n == 3) {
  38.                         a = b = 130;
  39.                     }
  40.                 } else {
  41.                     if (n == 0) {
  42.                         a = 75;
  43.                         b = 40;
  44.                     } else if (n == 1) {
  45.                         a = 40;
  46.                         b = 130;
  47.                     } else if (n == 2) {
  48.                         a = 130;
  49.                         b = 130;
  50.                     }
  51.                 }
  52.             }
  53.             if (len == 5) {
  54.                 if (n == 0) {
  55.                     a = 70;
  56.                     b = 40;
  57.                 } else if (n == 1) {
  58.                     a = 140;
  59.                     b = 40;
  60.                 } else if (n == 2) {
  61.                     a = 40;
  62.                     b = 110;
  63.                 } else if (n == 3) {
  64.                     a = b = 110;
  65.                 } else {
  66.                     a = 180;
  67.                     b = 110;
  68.                 }
  69.             }
  70.             if (len == 6) {
  71.                 if (n == 0) {
  72.                     a = 40;
  73.                     b = 40;
  74.                 } else if (n == 1) {
  75.                     a = 110;
  76.                     b = 40;
  77.                 } else if (n == 2) {
  78.                     a = 180;
  79.                     b = 40;
  80.                 } else if (n == 3) {
  81.                     a = 40;
  82.                     b = 110;
  83.                 } else if (n == 4) {
  84.                     a = b = 110
  85.                 } else {
  86.                     a = 180;
  87.                     b = 110;
  88.                 }
  89.             }
  90.             if (len == 7) {
  91.                 if (n == 0) {
  92.                     a = 110;
  93.                     b = 40;
  94.                 } else if (n == 1) {
  95.                     a = 40;
  96.                     b = 110;
  97.                 } else if (n == 2) {
  98.                     a = 110;
  99.                     b = 110;
  100.                 } else if (n == 3) {
  101.                     a = 180;
  102.                     b = 110;
  103.                 } else if (n == 4) {
  104.                     a = 40;
  105.                     b = 180;
  106.                 } else if (n == 5) {
  107.                     a = 110;
  108.                     b = 180;
  109.                 } else {
  110.                     a = b = 180;
  111.                 }
  112.             }
  113.             if (len == 8) {
  114.                 if (n == 0) {
  115.                     a = 70;
  116.                     b = 40;
  117.                 } else if (n == 1) {
  118.                     a = 140;
  119.                     b = 40;
  120.                 } else if (n == 2) {
  121.                     a = 40;
  122.                     b = 110;
  123.                 } else if (n == 3) {
  124.                     a = 110;
  125.                     b = 110;
  126.                 } else if (n == 4) {
  127.                     a = 180;
  128.                     b = 110;
  129.                 } else if (n == 5) {
  130.                     a = 40;
  131.                     b = 180;
  132.                 } else if (n == 6) {
  133.                     a = 110;
  134.                     b = 180;
  135.                 } else {
  136.                     a = b = 180;
  137.                 }
  138.             }
  139.             if (len == 9) {
  140.                 if (n == 0) {
  141.                     a = 40;
  142.                     b = 40;
  143.                 } else if (n == 1) {
  144.                     a = 110;
  145.                     b = 40;
  146.                 } else if (n == 2) {
  147.                     a = 180;
  148.                     b = 40;
  149.                 } else if (n == 3) {
  150.                     a = 40;
  151.                     b = 110;
  152.                 } else if (n == 4) {
  153.                     a = 110;
  154.                     b = 110;
  155.                 } else if (n == 5) {
  156.                     a = 180;
  157.                     b = 110;
  158.                 } else if (n == 6) {
  159.                     a = 40;
  160.                     b = 180;
  161.                 } else if (n == 7) {
  162.                     a = 110;
  163.                     b = 180;
  164.                 } else {
  165.                     a = b = 180;
  166.                 }
  167.             }
  168.             var img = new Image();
  169.             img.src = Images[n];
  170.             img.onload = function(){
  171.                 context.drawImage(img, a, b, k, l);
  172.                 drawing(n + 1);
  173.             }
  174.         } else {
  175.             base64.push(canvas.toDataURL("image/jpg"));
  176.             document.getElementById(imgId).src = base64[0];
  177.         }
  178.     }
  179.     drawing(0);
  180. }

使用方法：在html页面中添加下面的js:

</>复制代码 
  1. window.onload = function(){
  2.     var Images = ["1.jpg","2.jpg","3.jpg","4.jpg"];
  3.     var fun = groupPic;
  4.     fun(Images, "imageId");
  5. }
GPU云服务器 云服务器 两者怎样结合 js画出表格 数据库结合什么用 js 像json中添加数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83885.html

相关文章

  • 怎样用js结合h5画出多头像组合头像

    摘要：有时候，我们需要显示一个许多用户组合的一个头像，像扣扣的讨论组头像，微信的群头像，下面是一个简单的实现方法首先，获取你需要的头像图片地址，保存在一个对象里面，例如然后可以限定组合图片的最大个数，比如限定四个，那么久判断数据库里的图片个数是否 有时候，我们需要显示一个许多用户组合的一个头像，像扣扣的讨论组头像，微信的群头像，下面是一个简单的实现方法： 首先，获取你需要的头像图片地址，保存...

    Forest10 评论0 收藏0

  • 如何用 html 和 css 画一拳超人

    摘要：在绘制琦玉的头像时，最重要的一个属性就是，我们用它可以画出圆形椭圆及各种变体。以下的样式能够画出琦玉的脸部形状在调整后，可画出眼鼻嘴的形状介绍属性也是一个很强大的属性，能够对元素做各种变形。 写这篇博客的起因是我看了Medium上的这篇文章：How I started drawing CSS Images，然后哇哦?，同样是前端开发，这区别怎么这么大呢？这位作者和我完全点了不同的技能点...

    wuyangchun 评论0 收藏0

  • [译] 在 Angular 中使用 HammerJS (触摸手势)

    摘要：是一个为应用添加触摸手势的非常受欢迎的库文中将看到结合一起使用是多么的简单原文示例是针对版本经过测试在目前最新的版本中此教程依然适用文章将以来统一代称版本名词滑动和类似但滑动更快速无粘滞左滑右滑上滑下滑头像轮播简介我们将构建一个头像轮播可以 HammerJS 是一个为 web 应用添加触摸手势的非常受欢迎的库,文中,将看到 Angular 结合 HammerJS 一起使用是多么的简单 ...

    lifesimple 评论0 收藏0

  • H5页面结合vue实现登录注册组件

    摘要：介绍结合框架作手机页面的登录注册组件登录注册相关知识点和的作用个人理解，如果不到位，恳请指出我的电脑通过请求登录某一个网页，登录成功之后，服务器会返回一个给我的电脑。 介绍 结合`vue`框架作手机H5页面的登录注册组件 登录注册相关知识点 1.cookie和token的作用（个人理解，如果不到位，恳请指出） token： 我的电脑通过http请求登录某一个网页，登录成功之后，服务...

    ygyooo 评论0 收藏0

发表评论

登陆后可评论

0条评论

Eirunye

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<