js如何将gif图片分解拆开变成静态图片

大家都知道gif的可以从视频、照片、摄像头中的创建gif动画,那么gif动画如何逆向拆成单个图片呢,以前我们需要用到后端的库,如何java中的GifDecoder ,php中的GifFrameExtractor,那么有没有办法在浏览器中通过js来拆解gif呢,有,今天我们来试试js来拆解gif
今天用到的js库就是libgif,这是一个很强大的库,可以对gif动画进行播放控制,提取帧数据
下面就是一个示例,可以直接在线运行和编辑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script type="text/javascript">
bready(function() {
use(["libgif"], function() {
document.querySelector("#input").onchange= function() {
var gifImg = document.createElement('img');
// gif库需要img标签配置下面两个属性
gifImg.setAttribute('rel:animated_src', URL.createObjectURL(this.files[0]))
gifImg.setAttribute('rel:auto_play', '1')
var sup1 = new SuperGif({
gif: gifImg
});
...点击查看剩余70%
网友评论0