怎样用js结合h5画出多头像组合头像
有时候,我们需要显示一个许多用户组合的一个头像,像扣扣的讨论组头像,微信的群头像,下面是一个简单的实现方法:
首先,获取你需要的头像图片地址,保存在一个对象里面,例如:
var data = []; 然后可以限定组合图片的最大个数,比如限定四个,那么久判断数据库里的图片个数是否大于4,如果大于4,那么就取前四个,如果不大于4,那么就取完。
随后,看注释:
var base64 = []; //用来装合成的图片var c = document_createElement_x_x('canvas'); //创建一个canvasvar 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对象的srcimg.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");
}
怎样用js结合h5画出多头像组合头像相关推荐
- 怎样用js结合h5画出多头像组合头像 1
有时候,我们需要显示一个许多用户组合的一个头像,像扣扣的讨论组头像,微信的群头像,下面是一个简单的实现方法: 首先,获取你需要的头像图片地址,保存在一个对象里面,例如: var data = []; ...
- C语言跟随鼠标画方框,JS拖动鼠标画出方框实现鼠标选区的方法
本文实例讲述了JS拖动鼠标画出方框实现鼠标选区的方法.分享给大家供大家参考.具体如下: 相当实用的一个JS技巧,拖动鼠标可画出一个方框,可作为一个选区的功能,可以用来画流程图,设计草图什么的,也可以作 ...
- 教你用开源 JS 库快速画出 GitHub 章鱼猫
本文作者:HelloGitHub-kalifun 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 点击本文最下方的"阅读原文"即可获取 在上一篇文章我们介 ...
- 用matlab画出漂亮的组合图,折线图加柱状图,论文用图
效果如下:(转发请标明出处) % 定义线上点的x坐标 x = 1:1:5; %第一个1是起始端点,中间的是步长,最后一个是结束端点 %纵坐标 samp1 = [0.999 0.9 0.5 0.1221 ...
- 用d3.js画出带米字格的汉字
最终要实现的效果: 我们先用d3.js画出一个带米字格的汉字: <!DOCTYPE html> <html><head><meta charset=" ...
- java矢量图_你见过js画出这样的矢量图以及动画特效吗?
js 画出几十种矢量图 raphaeljs 超炫丽的动画效果 3.动态曲线图 ---- js 画图 raphaeljs demo http://raphaeljs.com/analytics.ht ...
- 用js画出一个等腰三角形
用js画一个等腰三角形 效果图如下: 效果图如下: <html> <head> </head> <body> <script language=& ...
- h5画三角形_如何利用css或html5画出一个三角形?两种不同的制作三角形方法(代码实例)...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
- html中矩形坐标,js怎么根据坐标在图片上画出矩形框?
如图本地上传的图片,并点击获取到这个图片里每个地方的坐标,根据4个角坐标在图片上画出矩形框,该怎么画?大神支招. 我图片是显示在div里的,是不是应该用canvas显示图片? 代码: Document ...
- 使用canvas画出满天繁星
今天学习了h5中的canvas标签,结合之前学习的画星星的算法,画出了满天繁星的效果图 下面是展示: 做这个比较难的是画星星的算法,下面是帮助大家理解一个图: 只需要找到上面的十个点(5个小圆的点和5 ...
最新文章
- error:CLEARTEXT communication to api.help.bj.cn not permitted by network security policy
- 友元函数、类的非静态成员函数、静态成员函数的区别
- 设置Socket缓冲区
- Howto: Deploy VC2008 apps without installing vcredist_x86.exe
- JButton的setRollover出现的奇怪问题
- Gartner:2019年七大AI科技趋势,百万行业将颠覆!
- Boost:双图bimap与双向地图的测试程序
- Leetcode--145. 二叉树的后序遍历(迭代递归)
- php mongodb排序查询,Mongodb 如何按照内嵌文档的某个字段排序?
- svg 折线添加新的折点
- 【算法分析与设计】DFS与BFS的区别
- 德州2021高考考试成绩查询,德州高考成绩查询系统2021
- 7、菜单栏、工具栏、状态栏、浮动窗口、TextEdit
- 4 个拥有绝佳命令行界面的终端程序
- Vijos1982 NOIP2015Day2T2 子串 substring 动态规划
- 如何解决浏览器被网站劫持
- uniapp iOS打包
- 刻录光驱不能访问出现函数不正确问题解决
- Idea、pycharm、Phpstorm鼠标滑动设置字体大小方法
- 一本书读懂大数据 读书笔记(1)