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

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

我们先去gifshot.js的官网了解一下它。
在官网中可以看到，最主要的文件是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）下，

然后在一个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语句，，，嘿嘿嘿

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

神奇的AI：将静态图片转为3D动图
近日我们从外媒获得消息,位于莫斯科的三星AI中心和Skolkovo科学技术研究所的研究人员发表了一篇新论文,详细介绍了从单个静止人像照片生成3D动画人像的创建.与此前能够生成照片般逼真肖像的人工智能A ...
静态图片怎么做成gif图？如何将静态图做成动态图
静态图片怎么做成gif图?很多小伙伴们平时都会使用手机拍摄一些日常生活的记录或者是自己的自拍,但是千篇一律的静态图片即使非常好看也会让大家审美疲劳.今天来教大家一个方法,能够把静态图片做成gif动图, ...
怎么做GIF动画？怎样将图片合成gif动图
大家平时看到的动态图片其实也是一种图片格式,只是由于与其他静态图片不同的是图片能动,所以有很多小伙伴以为gif是视频格式,其实gif动画我们也是可以自己制作的,通过把我们平时拍摄的照片进行合成就可以得 ...
webpack 在js中引入静态图片
原文链接: webpack 在js中引入静态图片上一篇: gif 屏幕录制下一篇: js 使用默认参数达到强制参数的目的在js中引入静态文件在自己实现一个tab组件时遇到这个问题,点击不同的t ...
nuxt.js中的静态图片显示不出来解决方法
nuxt.js中的静态图片显示不出来解决方法 <script> export default {data() {return {imgList: [{ name: "图1&quo ...
怎么把图片做成gif动图
怎么把图片做成gif动图?当我们看到网上有很多非常搞笑又可爱的gif动图,你是不是也想自己做一个属于自己的呢?嗯,有很多的小姐姐,他们就很喜欢做一些小动物或者小宝宝的gif动图.gif动图大家应该都不 ...
视频剪辑软件，批量将MP4格式的视频转为GIF动图
什么是视频转码呢?视频转码,英文是video transcoding,是指将已经压缩编码的视频码流转换成另一种视频码流,以适应不同的网络宽带.不同的终端处理能力和不同的用户需求.通俗的说就是转换视频的 ...
如何将图片做成gif动图？
如何将图片做成gif动图?前几天我的一个粉丝小伙伴问我一个问题,上班的时候领导给了他几张图片,让他将这几张图片合并做成一张gif动图,他也是第一次制作gif动图,于是在网上寻找方法教程,找了很久也尝试 ...
Go: 一种判断 webp 格式的图片是否为动图的方法
写在前面 webp 格式的图片可以支持动图和静图,但我们无法简单的通过判断后缀名格式一类的做法来处理.我们可以通过读取该 webp 图片的内容,来判断该 webp 图片是否为动图. 内容以下面这张 ...

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

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

最新文章

热门文章