使用gifshot.js实现将静态图片转为gif动图

阳光穿透心脏的1/2处 2023-07-24 02:04 84阅读 0赞

最近，项目上又提出了新的需求，要求能够上传三张图片制作为gif图，在网上罗列搜寻了一下，发现目前最主要的方法有两种，一是gif.js，一是gifshot.js。经过功能对比，最终选择了gifshot.js。因为这种方法不仅支持图片转为gif，还支持视频和摄像头制作gif。下面说说如何使用gifshot.js

我们先去gifshot.js的[官网][Link 1]了解一下它。  
在官网中可以看到，最主要的文件是dist目录下的gifshot.js，官网直接在html文件中引入  
`<script src='gifshot.js'></script>`  
然后在js中写

gifshot.createGIF({}, function(obj) {
      if(!obj.error) {
        var image = obj.image,
        animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
      }
    });

这里默认的是调用摄像头制作gif  
gifshot的API相关方法去官网了解，这里不做过多赘述。。。

下面开始创建demo

创建demo的时候，建议创建react或者vue这样的demo，不然访问本地 文件的时候会出现跨域问题，然后又得去解决跨域。。。后面说一下如何解决访问本地文件出现跨域，我这里创建的是react demo。

我们创建好react demo后，将gitshot.js文件放到静态资源目录（static）下，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70]  
然后在一个js文件中引入gifshot.js

import React from 'react';
    
    import gifshot from './static/gifshot';
    
    
    import src1 from './images/1.png'
    import src2 from './images/2.png'
    import src3 from './images/3.png'
    import src4 from './images/4.png'
    import src5 from './images/5.png'
    import src6 from './images/6.png'
    import src7 from './images/7.png'
    import src8 from './images/8.png'
    
    function App() {
      gifshot.createGIF({
        gifWidth: 200,
        gifHeight: 200,
        // images: [
        //   'https://t9.baidu.com/it/u=3363001160,1163944807&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1586855265&t=bda8700df538f6be8b0158c0a7f8f7df',
        //   'https://t9.baidu.com/it/u=583874135,70653437&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1586855265&t=6afcc905d3890e2e10910155fb7c73ed',
        // ],
        images: [src1, src2, src3, src4, src5, src6, src7, src8],
        interval: 0.1,
        numFrames: 10,
        frameDuration: 1,
        fontWeight: 'normal',
        fontSize: '16px',
        fontFamily: 'sans-serif',
        fontColor: '#ffffff',
        textAlign: 'center',
        textBaseline: 'bottom',
        sampleInterval: 10,
        numWorkers: 2
      }, function (obj) {
        if (!obj.error) {
          var image = obj.image,
            animatedImage = document.createElement('img');
          animatedImage.src = image;
          document.body.appendChild(animatedImage);
        }
      });
      return (
        <div className="App">
        </div>
      );
    }
    
    export default App;

要更改一下gifshot.js的这个地方

// Universal Module Definition (UMD) to support AMD, CommonJS/Node.js, and plain browser loading
    if (typeof define === 'function' && define.amd) {
        define([], function () {
            return API;
        });
    } else if (typeof exports !== 'undefined') {
        module.exports = API;
    } else {
        window.gifshot = API;
    }

不然会提示define is undefined的错误，  
我的处理是直接删除了第一个if语句，，，嘿嘿嘿

[Link 1]: https://github.com/yahoo/gifshot
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70]: /images/20230528/58c250963a844e0dbf1261067d76679a.png