gif动图的裁剪实现思路

已于 2024-02-05 23:33:04 修改
阅读量651 收藏 5
点赞数 26
文章标签： vue.js 前端 javascript
于 2024-02-03 22:42:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43502666/article/details/136015797
版权

项目需求(对app的轮播,以及banner和咨询的图片进行裁剪):前期实现使用用vue-cropper插件对图片进行插件,----后续需求需要裁剪gif动图(vue-cropper、微信自带的截图工具,以及fastStone截图工具,都只能截取静态图片,打开动图时只显示某一帧的静态图片),所以需要研究为什么vue-cropper明明打开的是gif图,而结果显示的确实某一帧???对于上传图片的操作使用type=file的html标签,选中某个文件后产生文件流,然后我们将文件流转化为base64,通过img的src引入时,动图可以显示,但是通过vue-cropper这个插件中的组件src属性引入时,页面只能显示某一帧图片,所以vue-cropper插件不支持裁剪动图,

实现思路:仿照vue-cropper(没有现成的裁剪gif组件)

实现思路:三步很简单,但实现起来不容易(涉及到三个js库)

(1)上传gif动图,通过img标签显示在页面上

(2)在图片上显示裁剪框

(3)解析gif动图的某一帧,然后将每一帧生成canvas图像(每一帧都是一个图片,生成的图像已经是被裁剪过了的);

(4)将canvas图像转化为gif,通过addFrame收集canvas图像,收集完毕后调用render合成;

三个js库的作用—涉及到三个构造函数Cropper、GifToCanvas、Gif

最低0.47元/天 解锁文章
和科比合砍81分
关注
  • 26
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AE_PS实现GIF动图
12-01
通过这个过程，你可以利用AE和PS的强大功能，将"大圣归来"这样的静态图像转化为生动的GIF动图。无论是简单的帧动画还是复杂的视觉效果，这两个工具都能帮助你实现创意。记住，实践是提高技能的关键，不断尝试和学习...
小巧干净的GIF动图制作软件
12-08
标题中的“小巧干净的GIF动图制作软件”指的是一个专为创建GIF动画而设计的应用程序，其特点在于体积小、占用存储空间不多，同时界面简洁，无广告打扰，用户体验良好。这样的软件通常适用于那些需要快速、简便地制作...
《自动化机器学习》
2401_84447328的博客
04-27 759
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
vue-cropper实现gif裁剪
qq_41072930的博客
11-21 765
vue-cropper实现gif裁剪。
Web前端最全vue裁剪gif图片并保持动画效果，2024年最新前端工程师面试题
最新发布
2401_84411018的博客
05-16 206
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
vue裁剪gif图片并保持动画效果
纸飞机博客
05-30 4846
本案例中只针对gif做了处理，裁剪gif后，裁剪出来的图片仍然可以保持动画，这解决了以往gif裁剪只能裁剪出一帧的问题。
vue裁剪gif并让裁剪后的图片继续动起来
m0_60992572的博客
08-28 303
一.效果 本案例中只对gif做了处理，预留了非gif的处理，可以自行处理。文章末尾会附上案例地址。 这张图片有点大，请耐心等待2秒。 预览地址：点我就可以飞过去 二.思路 相当于就是取裁剪框在图片中的位置和宽高，再根据帧数，取绘制区域大小及四个顶点的坐标绘制一遍gif。 三.代码 <template> <div id="app"> <div class="main cut"> <div class="cut-uploa..
vue-cropper插件使用
热门推荐
aizenmoxiguan的博客
12-03 2万+
vue-cropper插件使用（vue2)
【一闪】GIF动图神器
06-24
【一闪】GIF动图神器【一闪】GIF动图神器【一闪】GIF动图神器【一闪】GIF动图神器【一闪】GIF动图神器【一闪】GIF动图神器【一闪】GIF动图神器【一闪】GIF动图神器【一闪】GIF动图神器【一闪】GIF动图神器【一闪】...
加载中gif动图.rar
02-16
8. **编程语言中的GIF处理**：在编程环境中，例如JavaScript或Python，可以利用库（如JavaScript的`react-gsap`或Python的`PIL`）来操作和控制GIF动图，实现更复杂的动态效果和交互。 9. **Web性能优化**：考虑到...
gif动图录制小工具
04-24
标题中的“gif动图录制小工具”指的是一个专门用于创建gif动画的软件，它能够捕捉桌面活动并将其转化为gif图像格式。这样的工具通常简洁易用，适合快速制作演示、教程或者趣味性的动态图片。 描述中提到的“gif录像...
Cropper.js v1.5.11.zip
06-02
含v1.5.11版Cropper.js、Cropper.css，以及jquery.min.js
用开源项目Cropper实现对图片的裁剪
08-08
用开源项目Cropper实现对图片的裁剪，相关博文：http://www.cnblogs.com/tianzhijiexian/p/3900241.html
vue裁剪gif图片并保持gif的动效果(限时免费)
08-04
vue裁剪gif图片并保持gif的动效果，下载可直接运行，demo简洁易懂，可直接使用，效果见https://blog.csdn.net/qq_32442973/article/details/117398384
vue裁剪gif图片并保持动画效果，这些面试题你会吗，跟前端初学者分享几点经验
2401_83621918的博客
03-19 224
:‘确定’}}
gif.js裁剪报错 Uncaught SyntaxError: Unexpected token ‘＜‘
qq_38734862的博客
04-19 1021
gif裁剪报错 Uncaught SyntaxError: Unexpected token '<'
cropper动态裁剪图片（极简）
lfq761204的博客
06-02 416
借助cropper插件可以很简单地实现客户端的图片自定义裁剪。 cropper插件下载链接（含v1.5.11版Cropper.js、Cropper.css，以及jquery.min.js）：
cropper图片裁剪
zy941209的博客
08-23 1118
  上传时往往图片分辨率过大造成问题，在这分享给大家一个裁剪的小插件，很方便，也很实用。 HTML代码模块  &lt;!-- 图片裁剪需要引入的文件 --&gt; &lt;link rel="stylesheet" href="&lt;%=basePath%&gt;ImageResizer/css/cropper.min.css"&gt; &lt;link rel="sty...
Android第三方开源图片裁剪截取：cropper
weixin_34082695的博客
06-12 913
 Android第三方开源图片裁剪截取：cropper 很多app都需要裁剪截取图片作为头像、logo之类，而cropper是github上的一个针对Android平台的、第三方开源图片裁剪截取项目，其项目主页是：https://github.com/edmodo/cropper cropper项目给出的一个例子以一张蝴蝶图作为目标图片进行裁剪截取，如图： crop...
python聊天室实现gif动图
09-04
要实现一个Python聊天室中的GIF动图，你需要使用Python的Socket库来建立客户端和服务器之间的连接。然后，你需要使用Python的Pillow库来处理GIF动图，以便将其发送到其他客户端。 以下是一个简单的Python聊天室实现GIF动图的示例： ```python import socket import threading from PIL import Image, ImageSequence # 客户端类 class ChatClient: def __init__(self, host, port): self.sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) self.sock.connect((host, port)) self.gif_data = b'' # 接收消息 def receive(self): while True: data = self.sock.recv(1024).decode() if data.startswith('GIF'): # 如果接收到的数据是GIF动图 self.gif_data += data.encode() # 将数据添加到GIF缓冲区中 if data.endswith('\r\n'): # 如果数据以\r\n结尾，说明GIF动图接收完毕 self.show_gif() # 显示GIF动图 self.gif_data = b'' # 清空GIF缓冲区 else: print(data) # 发送消息 def send(self, msg): self.sock.send(msg.encode()) # 显示GIF动图 def show_gif(self): img = Image.open(BytesIO(self.gif_data)) for frame in ImageSequence.Iterator(img): frame.show() # 服务器类 class ChatServer: def __init__(self, host, port): self.clients = [] self.sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) self.sock.bind((host, port)) self.sock.listen(1) # 接收连接 def accept_clients(self): while True: client_sock, client_addr = self.sock.accept() client = ChatClient(client_sock) self.clients.append(client) client_thread = threading.Thread(target=self.handle_client, args=(client,)) client_thread.start() # 处理客户端 def handle_client(self, client): while True: data = client.sock.recv(1024).decode() if data: if data.startswith('/gif'): # 如果客户端发送的消息是GIF动图 self.send_gif(client, data) # 将GIF动图广播给其他客户端 else: self.broadcast(client, data) # 广播消息给其他客户端 # 广播消息 def broadcast(self, client, msg): for c in self.clients: if c != client: c.sock.send(msg.encode()) # 广播GIF动图 def send_gif(self, client, data): for c in self.clients: if c != client: c.sock.send(data.encode()) # 主函数 if __name__ == '__main__': server = ChatServer('localhost', 9999) server_thread = threading.Thread(target=server.accept_clients) server_thread.start() while True: name = input('Enter your name: ') if name: break client = ChatClient('localhost', 9999) receive_thread = threading.Thread(target=client.receive) receive_thread.start() while True: msg = input() if msg.startswith('/gif'): # 如果发送的消息是GIF动图 with open('animated.gif', 'rb') as f: gif_data = f.read() client.send(gif_data) # 发送GIF动图数据 else: client.send(f'{name}: {msg}') ``` 这个示例中，客户端和服务器之间使用Socket库建立连接。当客户端收到GIF动图时，它会将数据添加到GIF缓冲区中，直到接收完毕。当接收完毕后，它会使用Pillow库将GIF动图显示在屏幕上。当客户端发送GIF动图时，它会将GIF动图数据发送到服务器，并广播给其他客户端。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值