zoukankan      html  css  js  c++  java
  • JS生成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)


    }
    );

  • 相关阅读:
    weblogic 未授权命令执行漏洞(CVE-2020-14882,CVE-2020-14883)复现
    sqlmap之--os-shell命令执行原理
    HTTP协议层面绕过WAF
    windows下过安全狗
    [SUCTF 2019]Pythonginx
    warmup(HCTF 2018)
    phpmyadmin 4.8.1 远程文件包含漏洞(CVE-2018-12613)
    phpMyAdmin写入WebShell(二)
    phpMyAdmin写入WebShell(一)
    [SUCTF 2019]EasySQL
  • 原文地址:https://www.cnblogs.com/airen123/p/10169112.html
Copyright © 2011-2022 走看看