js实现GIF图片的分解和合成

怼烎@ 2022-12-14 06:08 175阅读 0赞

# [https://www.jb51.net/article/172709.htm][https_www.jb51.net_article_172709.htm] #

这篇文章主要为大家详细介绍了js实现GIF图片的分解和合成，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

[![java][]][java 1]

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

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

**分解GIF**

1. 引入Git库

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>import SuperGif from </code><code>'./libgif.js'</code> </td> 
 </tr> 
 </tbody> 
</table>

2. 处理图片

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 </td> 
 <td> <code>var</code> <code>file = e.target.files[0];</code> <code>&nbsp;</code><code>console.log(file.type.indexOf(</code><code>'image/gif'</code><code>));</code> <code>&nbsp;</code><code>load_gif(file);</code> <code>function</code> <code>load_gif(gif_source) { </code> <code>&nbsp;&nbsp;</code><code>var</code> <code>gifImg = document.getElementById(</code><code>'gifImg'</code><code>);</code> <code>&nbsp;&nbsp;</code><code>// gif库需要img标签配置下面两个属性</code> <code>&nbsp;&nbsp;</code><code>gifImg.setAttribute(</code><code>'rel:animated_src'</code><code>, URL.createObjectURL(gif_source))</code> <code>&nbsp;&nbsp;</code><code>gifImg.setAttribute(</code><code>'rel:auto_play'</code><code>, </code><code>'0'</code><code>)</code> <code>&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;</code><code>// 新建gif实例</code> <code>&nbsp;&nbsp;</code><code>var</code> <code>rub = </code><code>new</code> <code>SuperGif({ gif: gifImg } );</code> <code>&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;</code><code>var</code> <code>running = </code><code>false</code><code>;</code> <code>&nbsp;&nbsp;</code><code>rub.load(</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;</code><code>var</code> <code>img_list = [];</code> <code>&nbsp;&nbsp;</code><code>var</code> <code>j = 0;</code> <code>&nbsp;&nbsp;</code><code>console.log(rub.get_length());</code> <code>&nbsp;&nbsp;</code><code>for</code> <code>(</code><code>var</code> <code>i=1; i &lt;= rub.get_length(); i++) { </code> <code>&nbsp;&nbsp;</code><code>// 遍历gif实例的每一帧</code> <code>&nbsp;&nbsp;</code><code>rub.move_to(i);</code> <code>&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;</code><code>var</code> <code>imgImage = </code><code>new</code> <code>Image();</code> <code>&nbsp;&nbsp;</code><code>//canvas生成base64图片数据</code> <code>&nbsp;&nbsp;</code><code>imgImage.src = rub.get_canvas().toDataURL(</code><code>'image/jpeg'</code><code>,0.8);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**合成GIF图片**

1. 引入Git库

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>import GIF from </code><code>'./gif.js'</code> </td> 
 </tr> 
 </tbody> 
</table>

2. 图片合成

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 </td> 
 <td> <code>var</code> <code>gif = </code><code>new</code> <code>GIF({ </code> <code>&nbsp;&nbsp;</code><code>workers: 2,</code> <code>&nbsp;&nbsp;</code><code>quality: 10,</code> <code>&nbsp;&nbsp;</code><code>workerScript: </code><code>'js/gif.worker.js'</code> <code>});</code> <code>var</code> <code>j = 0;</code> <code>&nbsp;</code>&nbsp; <code>var</code> <code>canvas= document.createElement(</code><code>"canvas"</code><code>);</code> <code>var</code> <code>ctx = tCanvas.getContext(</code><code>'2d'</code><code>);</code> <code>&nbsp;</code>&nbsp; <code>for</code> <code>(</code><code>var</code> <code>i=1; i &lt;= len; i++) { </code> <code>&nbsp;</code>&nbsp; <code>&nbsp;</code><code>var</code> <code>imgImage = </code><code>new</code> <code>Image();</code> <code>&nbsp;</code><code>imgImage.src = img;</code> <code>&nbsp;</code><code>imgImage.onload = </code><code>function</code> <code>(e) { </code> <code>&nbsp;</code>&nbsp; <code>&nbsp;</code><code>//Canvas绘制图片</code> <code>&nbsp;</code><code>canvas.width = width;</code> <code>&nbsp;</code><code>canvas.height = height;</code> <code>&nbsp;</code><code>console.log(width,height)</code> <code>&nbsp;</code><code>//铺底色</code> <code>&nbsp;</code><code>ctx.fillStyle = </code><code>"#fff"</code><code>;</code> <code>&nbsp;</code><code>ctx.fillRect(0, 0, canvas.width, canvas.height);</code> <code>&nbsp;</code><code>ctx.drawImage(imgImage, 0, 0, width, height);</code> <code>&nbsp;</code>&nbsp; <code>&nbsp;</code>&nbsp; <code>&nbsp;</code><code>gif.addFrame(canvas,{copy:</code><code>true</code><code>,delay:50});</code> <code>&nbsp;</code><code>j++;</code> <code>&nbsp;</code><code>//图片</code> <code>&nbsp;</code><code>if</code><code>(j&gt;=len) { </code> <code>&nbsp;</code><code>gif.render()</code> <code>&nbsp;</code><code>};</code> <code>&nbsp;</code><code>}</code> <code>}</code> <code>gif.on(</code><code>'finished'</code><code>, </code><code>function</code><code>(blob) { </code> <code>&nbsp;</code><code>//生成图片链接</code> <code>&nbsp;&nbsp;</code><code>var</code> <code>url = URL.createObjectURL(blob);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

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

[https_www.jb51.net_article_172709.htm]: https://www.jb51.net/article/172709.htm
[java]: /images/20221123/2c5acbcb5d9e43dd81fa2baf3b1975ef.png
[java 1]: https://t.1yb.co/6gLz