前端生成gif动态图下载_HeavyShell的博客

相关文章推荐

行走的键盘 · 云南省人民政府办公厅关于印发云南省“十四五” ...· 4 月前 ·

睿智的楼房 · 百度网盘查看文件夹的大小 - 知乎· 10 月前 ·

近视的冲锋衣 · “習書記對人民群眾有一顆赤子之心”--專題報 ...· 1 年前 ·

深情的围巾 · 提醒在瑞典中国公民加强安全防范· 1 年前 ·

年轻有为的人字拖 · 仍然想打篮球漫画｜官方在线漫画全集-快看漫画· 1 年前 ·

最近公司的某产品中，有动态热图的展现，分别展现某个时间段的热图时间变化，例如：最近一周七天内，每天的热图分布变化图；客户提出一个需求，这个动态变化的图生成一个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方式引入

      //要转换为图片的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">
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
</head>
	<!-- 用户生成图片的div区域，将付给imgaaa -->
	<div class="real-map">
			这里是html的元素内容区域
			这里是html的元素内容区域2
	<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;

简简单单，兢兢业业，走你！ 
                                    我使用html2canvas将网络摄像头中的快照保存为图像。然而，它仅保存在png中，我试图将其保存为gif，但无法找到如何执行此操作到目前为止，这是我的功能：renderCanvasImage: function(){setTimeout(function () {// Add image with Quote to Canvas (hidden).html2canvas($('.snap'),...
                                    在gif.worker.js文件最后声明一个函数，将该文件除了注释部分的代码之外的所有代码复制变成文本，然后给一个变量。进行函数处理， 需要获取到所有的地图图片canvas元素，然后通过canvas转换成图片。生命的函数将复制的代码文本转化成 blob,然后转化成url的形式。当前做项目有一个需求是将多张图片生成一个gif动图的形式。然后就可以生成gif图片啦 可以看一下下面的图片哦。下载好的包找到下面这个两个文件，引入到本地项目中去。将引入进来的两个包中的最后一行代码注释，避免映射。
                                    每天一个前端小技巧——生成gif动图下载
动态热图的展现，分别展现某个时间段的热图时间变化，例如：最近一周七天内，每天的热图分布变化图；这个动态变化的图生成一个gif图提供下载是否可行？
实现方案：
1.可通过服务端生成对应gif，然后前端请求下载
2.前端自己实现生成gif图片，自行下载采用方案：
前端实现方式，于是在网上找各种相关的几款组件调研，均有利弊，推荐两款好用并且稳定的组件：
1 html2canvas.js 官网：http://html2canvas.hertzen.com/
2 gif
前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index1.aspx.cs" Inherits="GuaidMenu.Index1" %>
<!DOCTYPE html>
<html xmln...
                                    / 如果不循环则暂停（如果需要播放完成回调，在这里面添加即可）// 切换图片间隔时间(毫秒)// 超过最后一张了则重新开始。/* 初始化样式 */// 设置 class。// 获取 imgs。// 有图片进行隐藏。
    *{padding: 0;margin: auto;}
    .box{width: 200px;height: 50px;position: relative;}
    .box img{position: absolute; width: 100%;height: 100%;}
    .sloganBg01{ z-index: 3; animation: slogan1 1.5
                                    原标题：不会GIF动图制作？不知道从哪里找动图素材？送你2个网站1个软件现在我们再创作内容时，都喜欢加上gif动图，特别是搞笑领域用的更多，这样看上去互让整篇文章都有画面感，而我们想要制作动图应该怎么办呢？哪里有这种动图的素材可用？ 下面准哥就给大家分享2个网站和1个软件，希望能够帮助到大家。网站一：SOOGIF(http://www.soogif.com/)这里面有海量的动图素材，都可以使用。 ...
                                    网上很多小动画都是GIF格式的，其中也有很多是从视频转换成gif的。其实GIF是将多幅图像保存为一个图像文件，从而形成动画，最常见的就是通过一帧帧的动画串联起来的gif图。那么视频如何制作gif动态图片呢？想自制GIF图的朋友不防学学，很易学的。首先要准备好要做成gif动画图的视频片段(一般也就几秒到十几秒钟的时长，太长不利传播)。可以使用狸窝全能转换器(兼剪辑功能)，在某一视频中提取出你需要的视...
                                    效果gif加个背景看清图片内容image.png代码body{background: #743efc;}.loading {background: url('../imgs/8.png') no-repeat;background-position: 0 0;background-size: 100% auto;width: 40px;height: 40px;animation: loading...
                                    1.先瞧瞧效果：2.代码是这样的：@mixin ani-btnRotate{@keyframes btnRotate{from{transform: rotateZ(0);}to{transform: rotateZ(360deg);}}}@include ani-btnRotate;#circle{position: absolute;left: 50%;width: REM(338);heig...