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

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

使用说明

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。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • canvas实现手机端用来上传用户头像的代码

    废话不多说了直接给大家介绍canvas实现手机端用来上传用户头像的代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> label{ height:40px; width:100px; border:1px solid #666; display:block; text-alig

  • 使用canvas实现仿新浪微博头像截取上传功能

    使用canvas实现仿新浪微博头像截取上传功能

    最近看到微博头像上传功能很感兴趣,于是就使用canvas写了一个,本文写的不好还请见谅.本程序目前在谷歌浏览器和火狐浏览器测试可用,ie浏览器无法支持. 因为ie的安全机制不允许img使用本地路径,所以若想ie支持本程序,必须先将图片上传,然后给img对象上传后的图片地址. 我在这里没写,是因为暂时没写上传功能的后端代码,并且还不确定有没有更好的解决办法. 如下是新浪的 如下是我做的截取部分 代码: var canvas = document.getElementById('canvas'),

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

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

    前天 是1024程序员节,不知道各位看官过的怎么样.既然是过节,就要有个过节的样子,比方说,换个头像

  • Js逆向实现滑动验证码图片还原的示例代码

    本文列举两个例子:某象和某验的滑动验证 一.某验:aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1mbG9hdC5odG1s 未还原图像: 还原后的图: 从服务端请求来的图片是打乱后的,给用户看的时候是完整的,这个过程肯定是运行了某段js代码,将打乱的图片进行还原操作.所以我们需要找到这段js,然后还原它的代码逻辑,实现图片的还原操作,找到缺口距离,实现滑动操作. 如果你仔细观察的话,你会发现还原后的图它是canvas生成出来的 那你应该会想到,那段

  • 原生JS利用transform实现banner的无限滚动示例代码

    功能 默认情况无限循环向右移动 点击数字切换到对应图片 点击左右切换可切换图片 原理 首先说下原理. 在布局上所有的图片都是重叠的,即只要保证Y方向对齐即可,当前可见的图z-index层级最高. 每隔3s中更换一张图片,使用setTimeout定时. 使用gIndex记录当前可视区域的展示的是哪张图片下标,每次更换,计算下一张图片的下标. 通过requestAnimationFrame实现一次图片切换的动画. 这种方法也可以做到整个页面始终只有2个img标签,而不必把所有的img节点全部创建出来

  • 原生js实现移动端触摸轮播的示例代码

    PC端上实现图片轮播效果很简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现. 下面是移动端手指滑动轮播图的完整代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scala

  • p5.js实现斐波那契螺旋的示例代码

    p5.js实现斐波那契螺旋的示例代码

    本篇文章主要介绍了p5.js实现斐波那契螺旋的示例代码,分享给大家,也给自己做个笔记 效果如下: 主要方法 translate() rotate() arc() 斐波那契螺旋 斐波那契螺旋线也称"黄金螺旋",是根据斐波那契数列画出来的螺旋曲线,以斐波那契数为边的正方形中画一个90度的扇形,连起来的弧线就是斐波那契螺旋. 草图 过程分解 一.定义一个空的斐波那契数组: var Fibonacci = []; 二.初始化 默认情况下draw()函数会无限重复绘图, frameRate()函

  • JS相册图片抖动放大展示效果的示例代码

    JS相册图片抖动放大展示效果的示例代码

    上篇文章给大家介绍了JS实现简单抖动效果,感兴趣的朋友点击查看. 今天给大家分享JS相册图片抖动放大展示效果,效果图如下所示: var xm; var ym; /* ==== onmousemove event ==== */ document.onmousemove = function(e){ if(window.event) e=window.event; xm = (e.x || e.clientX); ym = (e.y || e.clientY); } /* ==== window

  • three.js 实现露珠滴落动画效果的示例代码

    three.js 实现露珠滴落动画效果的示例代码

    前言 大家好,这里是 CSS 魔法使--alphardex. 本文我们将用three.js来实现一种很酷的光学效果--露珠滴落.我们知道,在露珠从一个物体表面滴落的时候,会产生一种粘着的效果.2D平面中,这种粘着效果其实用css滤镜就可以轻松实现.但是到了3D世界,就没那么简单了,这时我们就得依靠光照来实现,其中涉及到了一个关键算法--光线步进(Ray Marching).以下是最终实现的效果图 撒,哈吉马路由! 准备工作 笔者的 three.js模板 :点击右下角的fork即可复制一份 正片

  • Python实现屏幕代码雨效果的示例代码

    Python实现屏幕代码雨效果的示例代码

    直接上代码 import pygame import random def main(): # 初始化pygame pygame.init() # 默认不全屏 fullscreen = False # 窗口未全屏宽和高 WIDTH, HEIGHT = 1100, 600 init_width, init_height = WIDTH, HEIGHT # 字块大小,宽,高 suface_height = 18 # 字体大小 font_size = 20 # 创建一个窗口 screen = pyga

  • vue实现数字变换动画的示例代码

    vue实现数字变换动画的示例代码

    最近开发项目的时候有个屏保的部分,就几个数字觉得过于单调,索性加点特效在里边,UI图数字部分如下: emmm.所以加了个数字动态变动的效果 一开始直接在网上copy了一份.但是部分功能不太能满足需求 ,so,改动了部分,完美实现 改动部分: 1.数字不需要千位符,但是为了防止以后要有 所以加了个参数判断,默认是没有的 2.数字整数变动 3.组件改为行内元素,能更好的兼容页面样式 4.第二次数字变动在上次的数字累加 5.添加监听器防止页面不更新的情况 代码如下: <template> <s

  • 基于Vue3实现数字华容道游戏的示例代码

    基于Vue3实现数字华容道游戏的示例代码

    目录 前言 环境 思路 实现 GameCnt GameTool GamePass GameTip Menu 最后 前言 恰逢春之四月,天气忽热忽凉,遇游戏大赛,以笨拙之技,书一篇小文. 游戏规则:存在n*n的格子,需要将它们按数字顺序或图片顺序一一还原即可. 环境 主要环境: vue3 version:3.2.4 vite version:2.5.0 vue-router version:4.0.14 注:这个游戏的路由使用的是自动路由插件 主要插件: windicss version:3.5.

随机推荐