Javascript制作gif动图

gif.js 官网

软件简介 出自开源软件
gif.js 是一个可直接在浏览器上运行的 JavaScript GIF 编码器。支持的浏览器包括：

Google Chrome

Firefox 17

Safari 6

Internet Explorer 10

Mobile Safari iOS 6

使用方法：

var gif = new GIF({workers: 2,
quality: 10
});// add an image element
gif.addFrame(imageElement);// or a canvas element
gif.addFrame(canvasElement, {delay: 200});// or copy the pixels from a canvas context
gif.addFrame(ctx, {copy: true});gif.on('finished', function(blob) {window.open(URL.createObjectURL(blob));
});gif.render();

JS生成gif并导出base64格式代码

let gifimg1 = document.getElementById('gif1')
let gifimg2 = document.getElementById('gif2')
let gifimg3 = document.getElementById('gif3')
let arr = [gifimg1, gifimg2, gifimg3]function shezhitupian() {return new Promise((resolve, reject) => {let gif = new GIF({workers: 2,quality: 10,width: 100,height: 100,// background: '#ffffff',//原透明色替换为白色// transparent: 0xffffff//把图片中的白色替换为gif的透明色});arr.forEach((item, index) => {console.log(item, index)let canvas = document.createElement('canvas');canvas.width = 100canvas.height = 100let ctx = canvas.getContext('2d');ctx.drawImage(item, 0, 0, 96, 96);ctx.font = "bold 20px Arial";ctx.fillStyle = "red";ctx.fillText("test", 64, 64);gif.addFrame(canvas, { delay: 600 });if (index == arr.length - 1) {//渲染图片gif.render();}})//合成图片成功后gif.on('finished', function (blob) {// console.log(URL.createObjectURL(blob))blobToBase64(blob).then(res => {resolve({ path: res })})window.open(URL.createObjectURL(blob));});})
}
function blobToBase64(blob) {return new Promise((resolve, reject) => {const fileReader = new FileReader();fileReader.onload = (e) => {resolve(e.target.result);};fileReader.readAsDataURL(blob);fileReader.onerror = () => {reject(new Error('blobToBase64 error'));};});
}

javascript制作gif动图----gif.js相关推荐

python制作gif动画_实用的Python（2）利用Python制作gif动图
一.简介 moviepy是一个专门用于视频剪辑制作的模块,可以自动化完成很多繁琐的视频剪辑处理工作,除了处理视频数据之外,moviepy中还内置了可以制作gif动图的功能,通过使用moviepy.ed ...
百度地图gif图标_华为手机误删照片怎么找回？手机怎么快速制作GIF动图
对于华为手机,国内的很多人群都是非常喜欢的,特别是哪些花粉们简直就是疯狂,但是当我们使用华为手机误删了照片应该怎么办?如何才能找回误删的照片?误删手机照片怎么找回?不用担心,下面就让我们跟随小编一起来 ...
怎样快速制作GIF动图？教你一分钟在线制作GIF
相信有不少新媒体行业的伙伴们在平时写文章的时候,都喜欢在文章中插入好玩的GIF动图来给文章增加趣味.但是当我们想要将自己拍摄制作的图片制作成GIF的时候,应该如何制作gif动图呢?这时候,大家就可以使 ...
gif怎么做成html,gif动态图片制作方法附带电脑版和手机版制作gif动图教程
最近最流行的图片莫过于gif动图,既生动形象,又能够表达清晰,当你在预览gif动图时,有没有考虑自己制作一张动态图片呢?本文将告诉大家如何制作gif动态图片,希望能够帮助到大家. gif动态图片制作 ...
ArcGIS制作矢量动图
#以2021年1月前半个月的疫情数据为例数据准备:石家庄市村镇矢量图.各村庄/小区每天的确诊累计人数目录 1.数据准备 1.确诊人数统计 2.小区文件 3.数据连接 2.地图制图 3.生成动图 1 ...
如何做成gif动画图片？教你简单三步制作gif动图
随着网络的发展,从一开始的流行长图.视频.短视频到现在的gif动图,越来越方便.现在越来越多的行业也开始使用gif动图来做营销.那么,自己如何制作gif动图呢?很简单,使用[GIF中文网]-gif制作 ...
如何用计算机制作动态图,怎样用电脑轻松制作GIF动图图片
GIF动态图片在网上是很流行的,不管是社交软件.自媒体平台还是微信公众号都喜欢用GIF动态图片.GIF动态图片通过对图层的图片,按时间进行不同的切换,从而达到动画效果,生动形象.小伙伴们喜欢运用或浏览 ...
怎么制作gif动图？你学会制作了吗？
怎么制作gif动图?相信很多小伙伴们在日常生活中都会发送动图,其实制作生成动图并非什么难事.我们只需要借助一些好用的工具就可以帮助我们生成,如果是视频生成的话,那么我们可以直接导入视频即可:如果是图片 ...
python制作gif动图_短短几行Python代码制作的GIF动图
前言想知道怎么用Python代码与动画结合起来,制作GIF动图,并展示给其他人看呢?gifmaze可以帮助你很好的制作GIF动图,效果超棒, 比inter,pyglet和pyqt同比之下,还要好一点 ...

javascript制作gif动图----gif.js

Javascript制作gif动图

gif.js 官网

使用方法：

JS生成gif并导出base64格式代码

javascript制作gif动图----gif.js相关推荐

最新文章

热门文章