canvas+gif.js打造自己的数字雨头像的示例代码


Posted in Javascript onOctober 26, 2017

前天 是1024程序员节,不知道各位看官过的怎么样。既然是过节,就要有个过节的样子,比方说,换个头像?。你看我的头像牛逼不。今天介绍一个小demo,上传一个静态头像,就能得到一个动态的数字雨头像。抢先体验传送门](https://imgss.github.io/demo/gif/)

canvas+gif.js打造自己的数字雨头像的示例代码

使用说明

1.传一个你喜欢的头像,最后是正方形的

2.生成后看字符颜色是不是太诡异,可以改变字符颜色

3.觉得满意,右键另存为即可

gif.js

今天的主角是gif.js,gif.js是一个在浏览器上依靠H5api就能gif动画的库,这里介绍一下我猜的坑。关于绘制数字雨,园子里有相关文章,我就不瞎BB了。

gif.js可以很方便的根据canvas动图得到gif:

//代码来自官网

var gif = new GIF({
 workers: 2,//启用两个worker。
 quality: 10//图像质量
});//创建一个GIF实例

// 核心方法,向gif中加一帧图像,参数可以是img/canvas元素,还可以从ctx中复制一帧
gif.addFrame(imageElement);

// or a canvas element
gif.addFrame(canvasElement, {delay: 200});//一帧时长是200

// or copy the pixels from a canvas context
gif.addFrame(ctx, {copy: true});

gif.on('finished', function(blob) {//最后生成一个blob对象
 window.open(URL.createObjectURL(blob));
});

gif.render();//开始启动

整体而言,这个库的api十分简洁,友好。之前看了一个jsGif,看的云里雾里,后来才发现这么个好东西。由于生成gif图像是个耗费cpu的操作,尤其是当图像比较大的时候,因此库允许在webworker中渲染。但是文档中还是有几个要注意的地方要说明(其实是我踩的坑):

1.git.addFrame是添加一帧,要生成会动的gif,要来一个循环:

for(...){
gif.render(...)
}

2.构造函数GIF的选项中,需要workerScript选项,这样才能实现在worker中渲染图像,如下所示:

var gif = new GIF({
workers: 2,
quality: 10,
  workerScript:'./gif.worker.js'
});

源码我放在github上了,https://github.com/imgss/gif_rain_code,或者F12直接看demo。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
服务器安全设置的几个注册表设置
Jul 28 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
p5.js实现动态图形临摹
Oct 23 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 #Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 #Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 #Javascript
webpack3之loader全解析
Oct 26 #Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 #Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 #Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 #Javascript
You might like
玩转虚拟域名◎+ .
2006/10/09 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
vue实现微信分享功能
2018/11/28 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
Python中的fileinput模块的简单实用示例
2015/07/09 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
Python基于百度云文字识别API
2018/12/13 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
python 穷举指定长度的密码例子
2020/04/02 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
opencv实现图像平移效果
2021/03/24 Python
大学生就业推荐信范文
2013/11/29 职场文书
全国文明单位申报材料
2014/05/31 职场文书
法人委托书的范本格式
2014/09/11 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP