分解GIF图片、合成GIF图片

分解GIF图片
libgif-js：JavaScript GIF 解析器和播放器
https://github.com/aoiu/libgif-js
<script src="https://raw.githubusercontent.com/aoiu/libgif-js/master/libgif.js"></script>
or
https://github.com/buzzfeed/libgif-js

合成GIF图片
gif.js：JavaScript GIF 编码库
https://github.com/jnordberg/gif.js
示例
https://jnordberg.github.io/gif.js/
<script src="https://imgss.github.io/demo/gif/gif.js"></script>
gif.worker.js 与 HTML代码文件在同级目录可以不设置，如不在同级目录，workerScript则必须设置到对应路径
https://imgss.github.io/demo/gif/gif.worker.js

demo：处理被分解的GIF每一帧，写入图片、文字数据，生成新的GIF图片。
demo资源下载

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分解GIF图片、合成GIF图片</title>
<style type="text/css">body{ background-color: #ddd;}
</style>
</head>
<body><div><p><strong>分解GIF图片</strong></p><p>libgif-js：JavaScript GIF 解析器和播放器</p><p><a href="https://github.com/aoiu/libgif-js">https://github.com/aoiu/libgif-js</a></p><p>&lt;script src="https://raw.githubusercontent.com/aoiu/libgif-js/master/libgif.js"&gt;&lt;/script&gt;</p><p style="color: red;">or</p><p><a href="https://github.com/buzzfeed/libgif-js">https://github.com/buzzfeed/libgif-js</a></p><p>&lt;script src="https://raw.githubusercontent.com/buzzfeed/libgif-js/master/libgif.js"&gt;&lt;/script&gt;</p></div><hr ><div><p><strong>合成GIF图片</strong></p><p>gif.js：JavaScript GIF 编码库</p><p><a href="https://github.com/jnordberg/gif.js">https://github.com/jnordberg/gif.js</a></p><p>示例</p><p><a href="https://jnordberg.github.io/gif.js/">https://jnordberg.github.io/gif.js/</a></p><p>&lt;script src="https://imgss.github.io/demo/gif/gif.js"&gt;&lt;/script&gt;</p><p style="color: red;">gif.worker.js 与 HTML代码文件在同级目录可以不设置，如不在同级目录，workerScript则必须设置到对应路径</p><p><a href="https://imgss.github.io/demo/gif/gif.worker.js">https://imgss.github.io/demo/gif/gif.worker.js</a></p></div><hr ><style type="text/css">.gif_source{ color: blue; font-weight: bold;}.gif_source img , .gif_source canvas{ width: 150px;}.jsgif::before{ content: "GIF素材 - 分解后添加 - 生成的CANVAS"; display: block; margin-top: 20px; margin-bottom: 10px;}.jsgif::after{ content: "GIF素材 - 原图"; display: block; margin-top: 20px; margin-bottom: 10px;}</style><div class="gif_source"><img id="gifImg" src="1.gif" rel:animated_src="1.gif" rel:auto_play="1" /></div><style type="text/css">.gif_result{ color: blue; font-weight: bold;}</style><div class="gif_result"><p>GIF素材 - 分解后 - 处理每一帧合成图片</p></div><!-- 分解GIF图片 --><script src="libgif.js"></script><!-- 合成GIF图片 --><script src="gif.js"></script><script type="text/javascript">// 分解GIF图片load_gif();var gifImgLen , gifImgList = [];function load_gif() {// 新建gif实例var rub = new SuperGif({gif:document.getElementById('gifImg'), //必需：img 标签的 DOM 元素loop_mode:true, //可选：将此设置为 false 将强制禁用 gif 循环。auto_play:1, //可选：与上面的img标签 rel:auto_play 属性相同，这个 arg 覆盖了 img 标签信息。max_width:350, //可选：将 max_width 上的图像缩小到 max_width。对手机端访问有帮助。rubbable:1, //可选：让它可以擦掉。// on_end:()=>{console.log('gif 到达单个循环（一次迭代）结束')}, //可选：添加当 gif 到达单个循环（一次迭代）结束时的回调。传递的第一个参数是 gif HTMLElement。loop_delay:0, //可选：每次循环（迭代）后暂停的时间（以毫秒为单位）。progressbar_height:10, //可选：进度条的高度。progressbar_background_color:'#00ff00', //可选：进度条的背景颜色。progressbar_foreground_color:'#0000ff', //可选：进度条的前景色。});rub.load(function() {// console.log(rub);gifImgLen = rub.get_length();// console.log(gifImgLen);for (var i = 0; i < gifImgLen; i++) {// console.log(i);// 遍历gif实例的每一帧rub.move_to(i);// console.log(rub.get_current_frame());//canvas生成base64图片数据gifImgList[i] = rub.get_canvas().toDataURL('image/png');// console.log(gifImgList[i]);if (i == gifImgLen-1) {load_head_img();}}})}// 向原GIF中嵌入增加的头像元素var headImg;function load_head_img(){headImg = new Image();headImg.src = 'head.png';headImg.onload = function(){make_gif();}}// 合成GIF图片function make_gif() {var gif = new GIF({repeat:0, //重复计数，-1= 不重复，0= 永远quality:10, //质量 像素采样间隔，越低越好workers:2,// workerScript:'https://imgss.github.io/demo/gif/gif.worker.js',// workerScript:'gif.worker.js', //gif.worker.js 与 HTML代码文件在同级目录可以不设置，如不在同级目录，workerScript则必须设置到对应路径// background:'#ff0000', //背景 源图像透明的背景颜色// width:500, //宽度 输出图像宽度 （如果宽度或高度是null图像大小将由添加的第一帧确定）// height:500, //高度 输出图像高度transparent:'rgba(0,0,0,0)', //透明  透明的十六进制颜色，0x00FF00=绿色（实测：如处理每一帧时 铺底色 时，会导致生成的图片有雪花点）// dither:'Stucki-serpentine', //抖动 抖动方法，例如 FloydSteinberg-serpentine// debug:true, //调试 是否将调试信息打印到控制台});for (var i = 0; i < gifImgLen; i++) {(function(i){var img = new Image();img.src = gifImgList[i];img.onload = function(e) {// console.log(i);// console.log(this);//Canvas绘制图片var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');canvas.width = this.width;canvas.height = this.height;// ctx.clearRect(0,0,this.width,this.height);//铺底色// ctx.fillStyle = "#fff";// ctx.fillRect(0, 0, canvas.width, canvas.height);// 写入自定义头像ctx.drawImage(headImg, 105, 15, 85, 121);// 写入GIF当前帧图片ctx.drawImage(this, 0, 0, this.width, this.height);// 写入文字ctx.fillStyle = "greenyellow";ctx.font = 'bold italic 32px "PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"';ctx.textAlign = 'left';ctx.textBaseline = 'top';ctx.fillText(i,10,15)// 添加一个画布元素gif.addFrame(canvas, {delay:100, //延迟(帧延迟) 默认500 控制动画速度copy:true, //复制(复制像素数据) 默认false// dispose:-1, //处置(帧处理代码) 默认-1});//图片if (i == gifImgLen-1) {// 渲染gif.render();}}})(i)}// 渲染完成gif.on('finished', function(blob) {//生成图片链接var url = null;if(window.createObjectURL!=undefined){ // basicurl = window.createObjectURL(blob);}else if(window.URL!=undefined){ // mozilla(firefox)url = window.URL.createObjectURL(blob);    }else if(window.webkitURL!=undefined){ // webkit or chromeurl = window.webkitURL.createObjectURL(blob);}var newImg = document.createElement('img');newImg.src = url;console.log(url);// document.body.appendChild(newImg);document.getElementsByClassName('gif_result')[0].appendChild(newImg);})}</script></body>
</html>

分解GIF图片、合成GIF图片相关推荐

怎么把四个图片合成一个图片？
怎么把四个图片合成一个图片?关于图片的合成,我们一般都会用到图片处理软件来进行.但是对于一些职场新人来说,他根本不会用一些专业的图片处理软件,那么这个问题对他来说就是非常棘手的.其实遇到这样的问题,新 ...
ffmpeg学习心得之一键处理视频图片合成加图片水印文字水印裁剪
学了一个晚上,下面是我写的批处理 window命令行批处理直接拖文件夹或者拖动视频或者拖动音频可一键生成mp4.或者批量生成图片,或者生成gif https://download.csdn.net/d ...
php图片合成和图片处理（imagick）
在我们印象中php一些简单的图片处理可以用gd库来完成,但是真正快速高效的.灵活复杂的图片处理,gd库是不满足的,所以我们一般使用linux上的 ImageMagick 或者 php的imagick扩 ...
图片合成gif_谈谈有哪些好用的制作GIF的方式
今天咱们谈谈计算机上几种制作 GIF 的方式,而且他们都是免费的,但可能需要你会一点计算机操作技能.本文会简单的介绍一些常用的GIF软件,比较一下功能和上手程度.常见的GIF录制方式大概有这么几种方式 ...
php九宫格图片合成,多宫格图片合成
多宫格图片合成工具可以实现多种不同的图片合成以及图片特效图片加文字diy图片等组合功能. 它能够将多张图片按多宫格样式拼接合成为一张宫格图片,可自由设置拼接而成的图片大小以及每张之间的上下距离以及左右 ...
JAVA操作图片/合成/电子盖章等
JAVA操作图片/合成/电子盖章等 /**** @param mainFile* @param file1* @param f 透明度最大为1* @param response* @return* ...
python将视频分解为图片+将图片合成为视频
系列文章目录文章目录系列文章目录前言一.python视频拆分+图片合成(源码一) 1.python视频拆分 1.python图片合成二.python视频拆分+图片合成(源码二) 三.pyth ...
java gif合成_java图片处理——多张图片合成一张Gif图片并播放或Gif拆分成多张图片...
1.多张jpg图合成gif动画 /*** 把多张jpg图片合成一张 *@parampic String[] 多个jpg文件名包含路径 *@paramnewPic String 生成的gif文件名包 ...
CVPR2020论文解读：CNN合成的图片鉴别
CVPR2020论文解读:CNN合成的图片鉴别 <CNN-generated images are surprisingly easy to spot- for now> 论文链接:htt ...
小猿圈web前端简述canvas如何实现二维码和图片合成
你经常看到活动海报什么的,上都是有各种宣传文案以及二维码形成的,你知道怎么用canvas实现二维码和图片合成,下面小猿圈Linux讲师为你详细介绍一下canvas如何实现二维码和图片合成的. 使用ur ...

分解GIF图片、合成GIF图片

分解GIF图片、合成GIF图片相关推荐

最新文章

热门文章