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>