前端生成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>
//要转换为图片的dom对象var element = document.querySelector('.real-map');//要显示图片的img标签var image = document.querySelector('#imgaaa');var imageccc = document.querySelector('#imgccc');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)} );
以下为Demo:
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.onclick=()=>{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动态图下载相关推荐
- JS生成gif动态图下载
需求:通过动态变化的图生成一个gif图提供下载. 实现方案: 1.可通过服务端生成对应gif,然后前端请求下载 2.前端自己实现生成gif图片,自行下载 采用方案: 前端实现方式,于是在网上找各种相关 ...
- 前端直接生成GIF动态图实践
前言 去年在博客中发了两篇关于GIF动态生成的博客,GIF图像动态生成-JAVA后台生成和基于FFmpeg的Java视频Mp4转GIF初探,在这两篇博客中都是采用JAVA语言在后台进行转换.使用JAV ...
- 每天一个前端小技巧——生成gif动图下载
每天一个前端小技巧--生成gif动图下载 动态热图的展现,分别展现某个时间段的热图时间变化,例如:最近一周七天内,每天的热图分布变化图:这个动态变化的图生成一个gif图提供下载是否可行? 实现方案: ...
- AS下怎样录制APP操作生成Gif动态图
本文主要讲解Android下怎样录制APP操作生成gif动态图. Android App开发完成后,我们希望录制个gif做个展示.视频也可以展示,但是它没有gif轻量简单省流量.所以这篇文章就是讲解下 ...
- 【python】使用python中的pillow生成gif动态图
在之前的文章中,介绍了使用imageio生成gif动态图片,十分方便,简单,容易上手. 我发现pillow这个库也可以生成gif动态图片. 1.需求 使用pillow将一下4张图合成gif: 2.代码 ...
- 【python】使用python中的imageio生成gif动态图
Hello,大家好,我是augustqi.今天在写文章的时候,想在文章中插入动态图片,于是就上网搜了一下,发现很多免费的gif生成工具,使用起来并不是十分的方便(要我注册,要我登录,要我信息,要我看广 ...
- 音视频入门-20-BMP、PNG、JPG、GIF静态图生成GIF动态图
* 音视频入门文章目录 * 静态图 -> 动态图 前面 [18-手动生成一张GIF图片] 和 [19-使用giflib处理GIF图片] 生成的 GIF 每一帧都是一个颜色,平时用到的 GIF 每 ...
- 如何制作生成GIF?手把手教你生成GIF动态图
如何制作生成GIF?在我们日常的工作或者沟通中,通常都会使用到GIF动图,一个好的动图可以为沟通增色不少.我们除了收藏别人制作好的动图之外,其实我们也可以将自己拍摄的视频或者日常的截屏制作成动图.这里 ...
- war包怎么解压_渣渣辉表情包下载-渣渣辉抖音表情包动态图下载
详情介绍 渣渣辉表情包怎么制作?渣渣辉表情包gif在线生成工具应用安装资源推荐给大家,这是一款最近抖音上相当火爆的趣味聊天必备神器.这里各种各样的动态表情包应有尽有,你喜欢的表情包这里都有.感兴趣的小 ...
最新文章
- 建筑工程的发展、未来那个职业将会兴起!
- Nginx及其架构设计
- JS的数据访问及优化访问速度
- HDCVI——一种创新性的高清视频传输方案
- MetroGridHelper: A helpful debugging assistant for designers and developers alike
- ajax方式表单拦截
- XML学习笔记--导航
- mysql的安装以及开启远程访问
- LeetCode 435. 无重叠区间(贪婪算法)
- oracle 获得表字段名,注释等的sql语句 .
- C++--第10课 - 构造与析构 - 下
- opera档案学习(二)
- 如何用JavaScript实现轮播图(幻灯片)的制作
- Excel表格快速转PDF
- Linux zmap安装
- Docker部署solr8.5.2、ik、表结构一对多全量导入
- iOS崩溃日志ips文件解析
- Constructing Narrative Event Evolutionary Graph for Script Event Prediction
- 【USACO】2007 Feb Silver Lilypad Pond 白银莲花池
- 阿里云短信使用简介demo