java gif图片分割合成,js实现GIF图片的分解和合成

无意中看到一篇文章写得是关于纯前端处理GIF图片的问题，感觉挺有意思的所以自己也实现了一下；

主要用到的有两个第三方库：合成GIF图片的gif.js和分解的libgif.js;

分解GIF

1. 引入Git库

import SuperGif from './libgif.js'

2. 处理图片

var file = e.target.files[0];

console.log(file.type.indexOf('image/gif'));

load_gif(file);

function load_gif(gif_source) {

var gifImg = document.getElementById('gifImg');

// gif库需要img标签配置下面两个属性

gifImg.setAttribute('rel:animated_src', URL.createObjectURL(gif_source))

gifImg.setAttribute('rel:auto_play', '0')

// 新建gif实例

var rub = new SuperGif({ gif: gifImg } );

var running = false;

rub.load(function(){

var img_list = [];

var j = 0;

console.log(rub.get_length());

for (var i=1; i <= rub.get_length(); i++) {

// 遍历gif实例的每一帧

rub.move_to(i);

var imgImage = new Image();

//canvas生成base64图片数据

imgImage.src = rub.get_canvas().toDataURL('image/jpeg',0.8);

}

合成GIF图片

1. 引入Git库

import GIF from './gif.js'

2. 图片合成

var gif = new GIF({

workers: 2,

quality: 10,

workerScript: 'js/gif.worker.js'

});

var j = 0;

var canvas= document.createElement("canvas");

var ctx = tCanvas.getContext('2d');

for (var i=1; i <= len; i++) {

var imgImage = new Image();

imgImage.src = img;

imgImage.onload = function (e) {

//Canvas绘制图片

canvas.width = width;

canvas.height = height;

console.log(width,height)

//铺底色

ctx.fillStyle = "#fff";

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.drawImage(imgImage, 0, 0, width, height);

gif.addFrame(canvas,{copy:true,delay:50});

j++;

//图片

if(j>=len) {

gif.render()

};

}

gif.on('finished', function(blob) {

//生成图片链接

var url = URL.createObjectURL(blob);

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

java gif图片分割合成,js实现GIF图片的分解和合成相关推荐

css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
html上传动态图片不显示图片,解决 viewer.js 动态更新图片导致无法预览的问题
前台页面要求图片的查看,是在表格中点击查看才弹出图片,网上发现用Viewer插件的挺多,就选用的这款插件,但是Viewer插件会产生缩略图,这里取巧了,将缩略图统一替换成了一个带有查看两字的小图片,这 ...
html js 3d图片轮播,js实现3D图片逐张轮播幻灯片特效代码分享
本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码,实现过程很简单. 运行效果图:- ...
java让gif图停止,JS控制GIF图片的停止与显示
在掷骰子游戏中,通过需要控制骰子的转动以及转动结果的显示,骰子的转动可以用GIF动图来实现,每次投掷骰子的结果可以通过点击按钮显示静态图片.代码如下: CSS实现GIF动图的停止与开始(骰子) var ...
blob 图片_前端JS实现字符串/图片/excel文件下载
编者按:本文转载自SF专栏,由作者赵帅强授权奇舞周刊转载在web开发中,如果你想让用户下载或者导出一个文件,应该怎么做呢? 传统的做法是在后端存储或者即时生成一个文件来提供下载功能,这样的优势是 ...
android去掉png图片灰色背景,JS解决PNG图片灰色背景问题
PNG图片用来制作漂亮的网页背景很实用,此方法也是比较简单的,会让网页增色不少.不过,万恶的IE似乎暗中做对,当你使用PNG图片的时候,IE会自动为PNG图片增加一个灰色背景,这真的好让人烦,那么有没 ...
php 实现背景图片轮换,纯js实现背景图片切换效果代码
html代码背景切换因为javascript逻辑顺序比较强,所以要考虑引用js的位置 css代码 body {font-size:12px;} div{ width:950px; height:8 ...
原生js通过canvas和cssRules实现图片分割与重组
将一张照片分割成几段然后重新组合,按照常理来讲使用h5的canvas标签很容易就实现了,长话短说,直入正题: html : 首先创建一个img标签: <img id="img" ...
Java接受blob类型图片_原生JS上传图片接收服务器端图片并且显示图片（主要描述blob类型）...
1.了解后端处理图像的方式一:图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中二:将图片转换成blob,直接存储到数据库的 Image 类型字段中(这种方式负担很大不建议使 ...
java 将图片分割成9张_将多张图片合并成一张，代码（可垂直和水平方向合并）...
importjava.awt.image.BufferedImage;importjava.io.File;importjava.io.IOException;importjavax.imageio. ...

java gif图片分割合成,js实现GIF图片的分解和合成

java gif图片分割合成,js实现GIF图片的分解和合成相关推荐

最新文章

热门文章