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 相关文章推荐
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
Jquery使用val方法读写value值
May 18 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 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
PHP生成带有雪花背景的验证码
2006/10/09 PHP
PHP 压缩文件夹的类代码
2009/11/05 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
Prototype Class对象学习
2009/07/19 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
Python中的localtime()方法使用详解
2015/05/22 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
详解python中的 is 操作符
2017/12/26 Python
Python 元组操作总结
2019/09/18 Python
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
社区中秋节活动方案
2014/01/29 职场文书
财务主管岗位职责
2014/02/28 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
地道战观后感
2015/06/04 职场文书
正规欠条模板
2015/07/03 职场文书
捐款仪式主持词
2015/07/04 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS