gif图片解析与生成（GIF+文字动效）

github: https://github.com/baixc1/csdn/tree/master/js/mk-gif
生成 gif 图（平移+旋转+缩放）
解析 GIF 图片（生成每帧图片的base64）
- libgif.js 插件
- 生成 GIF 实例
- 解析每一帧
- 需要在服务器端运行（node server.js），然后访问根目录

 var rub = new SuperGif({ gif: img })rub.load(() => {const imgs = []const len = rub.get_length()for (let i = 1; i <= len; i++) {rub.move_to(i)      //遍历gif实例的每一帧imgs.push(rub.get_canvas().toDataURL('image/jpeg', 0.6))}})

合成帧
- 需要gif.js，gif.worker.js脚本
- 新 gif实例，添加画布作为帧
- 画布上合成之前帧和新的文字

let gif = new GIF({workers: 2,quality: 10,workerScript: './gif.worker.js'
});
function mkgif(imgs) {gif.on('finished', blob => {        //生成新GIF})let i = 0let len = imgs.lengthimgs.forEach((item, index) => {   //遍历每一帧，加字let img = new Image()img.src = itemimg.onload = () => {ctx.drawImage(img, 0, 0, imgW, imgH);   //GIF帧gif.addFrame(canvas, { copy: true, delay: 100 })  //canvas生成帧if (++i >= imgs.length) {       //已添加所有帧gif.render()}}})
}

整体代码实现

<!DOCTYPE html>
<html>
<script src="libgif.js"></script>
<script src="gif.js"></script><body><img id="myGIF" src="1.gif" />
</body>
<script>let img = document.getElementById('myGIF')img.onload = function () {let { width: imgW, height: imgH } = thislet gif = new GIF({workers: 2,quality: 10,workerScript: './gif.worker.js'});//需在服务器端运行let rub = new SuperGif({ gif: img })rub.load(() => {let { delays } = rubconst imgs = []const len = rub.get_length()for (let i = 1; i <= len; i++) {rub.move_to(i)      //遍历gif实例的每一帧imgs.push({url: rub.get_canvas().toDataURL('image/jpeg', 0.6),delay: delays[i - 1]})}mkgif(imgs)})/*** 1. 文字+图片，合成新gif* 2. 使用库：gif.js, gif.worker.js*/function mkgif(imgs) {let canvas = document.createElement("canvas");let ctx = canvas.getContext('2d');canvas.width = imgW;canvas.height = imgH;gif.on('finished', blob => {        //生成新GIFlet url = URL.createObjectURL(blob)console.log(url)let img = document.createElement('img')img.src = urldocument.body.appendChild(img)})let i = 0let len = imgs.lengthimgs.forEach((item, index) => {let { url, delay } = itemlet img = new Image()img.src = urlimg.onload = () => {ctx.clearRect(0, 0, imgW, imgH)     //清除画布（避免影响下一帧）ctx.drawImage(img, 0, 0, imgW, imgH);   //GIF帧ani({ ctx, index, len, })               //文字gif.addFrame(canvas, { copy: true, delay })  //canvas生成帧if (++i >= imgs.length) {       //已添加所有帧gif.render()}}})}}//动画前后状态//动画 - 旋转let rotateStart = 0let rotateEnd = 360//动画 - 平移let translateStartX = 100let translateStartY = 100let translateEndX = 400let translateEndY = 400//旋转let scaleStart = 1let scaleEnd = 0.5//字体let fontSize = 40let txt = "Hello World"function ani({ctx, index, len,}) {let rotateVal = rotateStart + index * (rotateEnd - rotateStart) / lenctx.font = `${fontSize}px Georgia`let xText = translateStartX + index * (translateEndX - translateStartX) / lenlet yText = translateStartY + index * (translateEndY - translateStartY) / lenlet scaleVal = scaleStart + index * (scaleEnd - scaleStart) / lenlet { width: wText } = ctx.measureText(txt)let hText = fontSizectx.save()          //状态保存，避免多次操作ctx.scale(scaleVal, scaleVal)               //缩放//旋转中心点(思路：https://blog.csdn.net/weixin_41837346/article/details/105488936)ctx.translate(xText + wText / 2, yText - hText / 2)deg = Math.PI / 180 * rotateValctx.rotate(deg, deg)ctx.fillText(txt, -wText / 2, hText / 2)ctx.restore()           //状态恢复}
</script></html>

gif图片解析与生成（GIF+文字动效）相关推荐

html字体左右摇动代码,CSS3 左右摇摆的文字动效
CSS 语言: CSSSCSS 确定 body { background: indianred; } .text { font-family: "Alfa Slab One", c ...
QQ音乐的动效歌词是如何实践的？
2019独角兽企业重金招聘Python工程师标准>>> 本文由云+社区发表作者:QQ音乐技术团队一. 背景 1. 现状歌词浏览已经成为音乐app的标配,展示和动画效果也基本上大 ...
QQ音乐的动效歌词是如何实践的？ 1
本文由云+社区发表作者:QQ音乐技术团队一. 背景 1. 现状歌词浏览已经成为音乐app的标配,展示和动画效果也基本上大同小异,主要是单行的逐字染色的卡拉OK效果和多行的滚动效果.当然,我们也不 ...
虚拟文字内容、图片、头像生成工具
现在设计行业是非常注重版权的,不是随便拿张素材.图片就能放到你的设计稿上面去哦,所以设计达人网一直坚持寻找版权免费使用的素材给大家!不过今天主要是不是素材,而且分享一些虚拟文字.图片.头像生成工具,比 ...
canvas 文字颜色_canvas 中普通动效与粒子动效的实现
(给前端大全加星标,提升前端技能) 作者:薄荷前端 https://github.com/BooheeFE/weekly/issues/26 canvas 用于在网页上绘制图像.动画,可以将其理解为画 ...
uniapp image图片切换动效_动效设计从概念到落地
一.什么是动效设计聚焦于产品中的动效,我们常说的动效设计可以分为3类: 1.交互动效交互动效承载了产品流程.交互行为的串联,不论可实际操作的交互原型还是纯做 demo 展示的动效过场都可以算作交互 ...
magicmatch java_签名图片一键批量生成使用Java的Webmagic爬虫实现
使用Webmagic爬虫实现的签名档一键生成实现原理这里爬取的网址是http://jiqie.zhenbi.com/c/ 然后获取到里面提交数据,提交地址,在对这些数据进行Post提交解析htm ...
CVPR 2022 | 基于GAN生成艺术文字logo及布局
来源 | 机器之心下图的每对 logo 中,一个是设计师设计的 logo,另一个是 AI 模型生成的,顺序不确定,你能分辨出哪些是 AI 模型生成的吗?(答案在文末揭晓) 文字标志(text log ...
java 批量为图片添加图标水印和文字水印
需求,给指定目录下面以.jpg结尾的文件,添加图标水印和文字水印文章目录一.基础版本二.升级版本三.依赖一.基础版本 package com.gblfy.util;import com.su ...
vue项目调用通用组件_详细解析：uniapp项目|vue组件形式实现的科技感loading纯CSS动效...
前言本人是一枚并不安分守己的后端程序猿,一直对前端开发"垂涎三尺",所以,一有机会就会"不务正业"一番.最近,发现了一个非常好的学习资料,于是乎,我的老毛病又 ...

gif图片解析与生成（GIF+文字动效）

gif图片解析与生成（GIF+文字动效）相关推荐

最新文章

热门文章