每天一个前端小技巧——生成gif动图下载
每天一个前端小技巧——生成gif动图下载
动态热图的展现,分别展现某个时间段的热图时间变化,例如:最近一周七天内,每天的热图分布变化图;这个动态变化的图生成一个gif图提供下载是否可行?
实现方案:
1.可通过服务端生成对应gif,然后前端请求下载
2.前端自己实现生成gif图片,自行下载
采用方案:
前端实现方式,于是在网上找各种相关的几款组件调研,均有利弊,推荐两款好用并且稳定的组件:
1 html2canvas.js 官网:http://html2canvas.hertzen.com/
2 gif.js 官网:https://jnordberg.github.io/gif.js/
下面具体记录下方案2的实现过程,逻辑拆分为3步:
1.html元素生成base64位图片
2.生成的图片对象转化为gif动态图
3.下载gif图片
话不多说,直接上主要代码:
html2canvas有node包版本的
import html2canvas from 'html2canvas';
但gif.js暂未发现node包版本,可采用cdn方式引入
<script type="text/javascript" src="https://imgss.github.io/demo/gif/gif.js"></script>
js代码
import pic1 from './images/1.png'
document.getElementById('imgccc').src=pic1
//要转换为图片的dom对象
var element = document.querySelector('.real-map');
//要显示图片的img标签
var image = document.querySelector('#imgaaa');
var imageccc = document.querySelector('#imgccc');
var btn = document.querySelector('#btn');
btn.οnclick=()=>{
html2canvas(element,{allowTaint: true}).then(function(canvas) {
var imageData = canvas.toDataURL(1);
image.src = imageData;
var arr=[
image,
imageccc
];
setTimeout(function(){
//调用gif对象方法
var gif = new window.GIF({
workers: 2,
quality: 10,
workerScript:'https://imgss.github.io/demo/gif/gif.worker.js'
});
//遍历图片对象
arr.map(item=>{
gif.addFrame(item, {delay: 1000});
});
gif.on('finished', function(blob) {
//下载动作
var el = document.createElement('a');
el.href = URL.createObjectURL(blob);
el.download = 'demo-name'; //设置下载文件名称
document.body.appendChild(el);
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false);
el.dispatchEvent(evt);
document.body.removeChild(el);
});
gif.render();
},1000)
});
}
html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<body>
<!-- 用户生成图片的div区域,将付给imgaaa -->
<div class="real-map">
<div>
这里是html的元素内容区域
</div>
<div>
这里是html的元素内容区域2
</div>
</div>
<img id="imgaaa" />
<img id="imgccc" src="" />
<button id="btn">点击生成</button>
<script type="text/javascript" src="https://imgss.github.io/demo/gif/gif.js"></script>
</body>
</html>
css代码
.real-map{
width:100px;
height:100px;
border:1px solid #ccc;
line-height:24px;
}
#imgccc{
background:#fff;
width:100px;
height:100px;
}
每天一个前端小技巧——生成gif动图下载相关推荐
- JavaScript笔记-使用JS管理URL链接(前端小技巧)
如下这个JavaScript代码: var common_ops = {buildUrl:function( path ,params ){//params = { "test": ...
- pandas apply lambda_一分钟一个Pandas小技巧(二)
" 在逛Kaggle的时候发现了一篇不错的Pandas技巧,我将挑选一些有用的并外加一些自己的想法分享给大家.本系列虽基础但带仍有一些奇怪操作,粗略扫一遍,您或将发现一些您需要的技巧.&qu ...
- 程序员的反击!每天一个离职小技巧
作者 | 梦想橡皮擦 来源 | 非本科程序员(ID:htmlhttp) 写在前面 俗话说的好,代码写的少,离职少不了. 最近畅游互联网,发现一些离职小技巧,读后,内心被深深的打动了,但是细细的品过之后 ...
- 3分钟学会python_3分钟学会一个Python小技巧
Python时间日期转换在开发中是非常高频的一个操作,你经常会遇到需要将字符串转换成 datetime 或者是反过来将 datetime 转换成字符串. datetime 分别提供了两个方法 strp ...
- vob转mp4,每天一个实用小技巧
vob转mp4,vob的英文全称是Video Object,它是DVD视频媒体使用的容器格式,vob格式擅长将数字视频.音频.字幕.菜单等多个元素复用在流格式中.而且vob格式的文件可以被加密保护.经 ...
- html前端小技巧—字体及颜色色值准确设置
今天分享下"html前端小技巧-字体及颜色色值准确设置"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一 ...
- 每天一个脱发小技巧 | Eclipse环境下spotbugs的安装配置和详细使用方法
每天一个脱发小技巧 | Eclipse环境下spotbugs的安装配置和详细使用方法 SpotBugs介绍 Eclipse环境下SpotBugs安装 SpotBugs的使用 其他 SpotBugs介绍 ...
- Java截取视频生成Gif动图
添加jar包依赖 <!-- 视频截图 --> <dependency><groupId>org.bytedeco</groupId><artifa ...
- python怎么变成动图_教你用 Python 生成 GIF 动图 !
最近啊 ,微信订阅号改变频繁 ,很多读者后台说 :小詹啊 ,我总是容易错过你公号的消息 ,现在没有置顶功能很难过啊 ! 不止你们难过 ,订阅号的作者恐怕更难过 !现在人人公众号时代 ,大家关注的公众号 ...
最新文章
- 学习笔记CB009:人工神经网络模型、手写数字识别、多层卷积网络、词向量、word2vec...
- IBM Rational上海大会印象
- Allegro 17.4设置中文界面
- 廖雪峰说python_廖雪峰官网Python部分的疑问及解决
- 读取不同位置的配置文件
- WZ132发现打CXY要么是程序员,要么是丑小鸭
- 米尔电子zynq ultrascale+ mpsoc底板外设资源清单分享
- gom引擎登录器_GOM传奇引擎微端配置详细架设语音教程
- Hibernate 懒加载 Unable to evaluate the expression Method threw ‘org.hibernate.LazyInitializationExcept
- 怎么制作真人qq秀_真人秀---搏击赛事新风向标的机与忧
- armv6、armv7、armv7s、arm64分别对应什么?
- 【黑马-SpringCloudAlibaba】学习笔记09-Nacos Config--服务配置
- css3中transform:translateY之后文字模糊的原因
- C/C++如何整行输入
- css3学习以及移动端开发基本概念的思考
- 如何用漏斗模型进行数据分析
- Excel:筛选列数据,不同值
- 切面条/猜字母/大衍数列/奇怪的分式
- 堆叠降噪自动编码器 Stacked Denoising Auto Encoder(SDAE)
- 中小型企业网络解决方案的设计和实施