GIF在线生成器
上传图片就能生成GIF的前端WEB工具
源码也非常简单
<!DOCTYPE html>
<html lang="zh" class="dark"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"><meta name="description" content="petpet generator"><meta name="theme-color" content="#ffeaa8"><meta property="og:title" content="petpet"><meta property="og:type" content="website"><meta property="og:url" content="https://benisland.neocities.org/petpet/"><meta property="og:image" itemprop="image" content="https://benisland.neocities.org/petpet/img/pet.png"><meta property="og:description" itemprop="description" content="petpet gif generator"><title>GIF在线生成器 </title><link rel="icon" href="favicon.ico"><!-- Sanitize CSS --><link href="https://unpkg.com/sanitize.css" rel="stylesheet" /><link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" /><link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" /><!-- External --><link rel="stylesheet" href="https://unpkg.com/jam-icons/css/jam.min.css"><link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&family=Work+Sans:wght@400;600&display=swap"rel="stylesheet"><!-- CSS --><link rel="stylesheet" href="style.css"><style type="text/css">.grid {margin: 0 auto;max-width: 48em;display: grid;grid-template-columns: 38.2% 61.8%;grid-template-areas:"header header""preview upload""preview output""footer footer";}.header {grid-area: header;text-align: center;padding: 0.618em 0.618em 1.25em;}.preview {grid-area: preview;border-top-left-radius: 0.618em;border-bottom-left-radius: 0.618em;padding-right: 0;}.upload {grid-area: upload;border-top-right-radius: 0.618em;}.output {grid-area: output;border-bottom-right-radius: 0.618em;}.footer {grid-area: footer;text-align: center;padding: 1.618em;}.preview-canvas {margin: 0 auto 2.312em;max-width: 200px;}.preview-playback {display: flex;}.preview-playback .btn {border-top-right-radius: 0;border-top-left-radius: 0;flex-grow: 1;}.btn-playback-playpause.paused .btn-playback-pause,.btn-playback-playpause:not(.paused) .btn-playback-play {display: none;}.export-row {margin-top: 1.75em;}.output-info {color: var(--txt-light);}img[src]+.output-info {margin-top: 1em;}fieldset {padding: 0;margin: 0;border: 0;}#fpsVal {width: 4em;margin-left: 0.618em;}@media only screen and (max-width: 40em) {.grid {grid-template-columns: 100%;grid-template-areas:"header""upload""preview""output""footer";}.header,.footer,.content {padding: 1.618em 8%;border-radius: 0;}.preview {padding-left: 16%;padding-right: 16%;}.content,.footer {border-top: 1px solid var(--input-border);}.export-row {margin-top: 2.5em;}#fpsVal {width: 7em;font-size: small;padding: 0.5em;padding-right: 0.2em;}}</style><script>/* change theme */ let theme = localStorage.getItem("theme"); theme || (theme = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"), document.documentElement.setAttribute("data-theme", theme), document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll("a.e").forEach(x => { x.href = x.dataset.href }); const e = document.getElementById("color-theme"); e.checked = "dark" == theme, e.addEventListener("change", t => { theme = e.checked ? "dark" : "light", document.documentElement.setAttribute("data-theme", theme), localStorage.setItem("theme", theme) }) });</script>
</head><body><main class="grid"><header class="header"><div class="heading">GIF在线生成 <input type="checkbox" id="color-theme" title="toggle theme"></div><div>如果网页崩了，一定不是我的锅</div></header><section class="preview content"><div class="content-heading">预览</div><div class="preview-canvas"><canvas height="112" width="112" id="canvas" class="canvas" tabindex="1"></canvas><div class="preview-playback"><button id="prev" class="btn btn-playback-prev control-grouped-left"><i class="jam jam-set-backward"></i></button><button id="play" class="btn btn-playback-playpause control-grouped-center"><i class="jam jam-play btn-playback-play"></i><i class="jam jam-pause btn-playback-pause"></i></button><button id="next" class="btn btn-playback-next control-grouped-right"><i class="jam jam-set-forward"></i></button></div></div><div class="preview-controls"><div class="row"><div class="control-group"><label for="toggleAdjust" class="control-group-l">细节调整</label><label for="toggleAdjust" class="toggle-switch"><input id="toggleAdjust" type="checkbox" class="toggle-switch-input"><span class="toggle-switch-control"></span></label></div><div class="hint">您可以使用鼠标/键盘/触控板移动图片细微调整 :-)</div></div><div class="row control-group"><label for="toggleFlip" class="control-group-l">翻转</label><label for="toggleFlip" class="toggle-switch sm"><input id="toggleFlip" type="checkbox" class="toggle-switch-input"><span class="toggle-switch-control"></span></label></div><div class="row control-group"><label for="scale" class="control-label control-group-s">尺寸</label><input id="scale" class="control-range control-group-l" type="range" step="1" min="15" max="200" value="85"></div><div class="row control-group"><label for="squish" class="control-label control-group-s">挤压</label><input id="squish" class="control-range control-group-l" type="range" step="1" min="100" max="300"value="125"></div><div class="row control-group"><label for="fps" class="control-label control-group-s">速度</label><input id="fps" class="control-range" type="range" step="2" min="2" max="60" value="16"><input type="number" id="fpsVal" class="control control-sm" step="1" min="2" max="60" value="16"></div><div class="row export-row"><div class="control-group"><button id="reset" class="btn btn-reset control-group-s">重设</button><div class="spacer" style="width:0.382em"></div><button id="export" class="btn btn-export control-group-l">导出</button></div></div></div></section><section class="upload content"><div class="content-heading">上传</div><div class="upload-preview"><label class="drop-area preview-image-container" id="dropArea" for="uploadFile"><div class="drop-area-input"><input class="drop-area-file-input" type="file" id="uploadFile" accept="image/*"><img class="drop-area-preview preview-image" src="/fancypig.png" id="uploadPreview"><div class="drop-area-upload" for="uploadFile"><label for="uploadFile" class="drop-area-upload-btn btn">选择文件</label><label id="uploadFileName" class="drop-area-upload-filename">或者直接拖进来</label></div></div></label><div class="row control-group"><input class="control control-group-l control-has-icon control-grouped-left" type="url" requiredplaceholder="输入图片URL地址" id="uploadUrl"><button type="submit" class="btn control-icon control-grouped-right" id="uploadUrlBtn"><iclass="jam jam-upload"></i></button></div><p id="uploadError" class="error-message"></p><p class="help">温馨提示：上传图片URL不一定 <a data-href="https://www.genban.org" target="_blank"class="e">有效</a> 因为有些网站做了跨域限制</p></div></section><section class="output content"><div class="content-heading">输出</div><figure class="preview-image-container"><img width="112" height="112" class="preview-image" id="result"><div class="help output-info" id="info">...</div></figure><p class="help"><a data-href='https://www.genban.org' target="_blank" class="e">备注：</a> 请将图片保存到本地，不要直接复制图片地址</p><p class="help">如果输出中出现了奇怪的绿点，请换个浏览器。</p></section><footer class="footer help"><br><br></footer></main><script src="requestInterval.js"></script><script src="gif.js"></script><script src="main.js"></script>
</body></html>
直接使用http-server启动或者别的WEB服务启动即可
项目地址：https://download.csdn.net/download/Highning0007/89109298
相关文章：
GIF在线生成器
上传图片就能生成GIF的前端WEB工具 源码也非常简单 <!DOCTYPE html> <html lang"zh" class"dark"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1, m…...
使用JavaScript制作一个简单的天气应用
随着Web开发技术的不断发展，JavaScript已经成为前端开发中不可或缺的一部分。它不仅可以用于创建动态和交互式的用户界面，还可以用于处理各种复杂的任务，如数据验证、动态内容更新、实时通信等。以下是一个使用JavaScript来创建一个简单天气应…...
说说对WebSocket的理解？应用场景？
文章目录 一、是什么二、特点全双工二进制帧协议名握手优点 三、应用场景参考文献 一、是什么 WebSocket，是一种网络传输协议，位于OSI模型的应用层。可在单个TCP连接上进行全双工通信，能更好的节省服务器资源和带宽并达到实时通迅 客户端和…...
网路维护基础知识
1、路由器 路由器：路由器就是将一个可以接入互联网的网路地址分成若干个网路地址可供终端设备连接的网路设备，设备既可以通过有线连接也可以通过无线连接进入互联网 2、交换机 交换机：个人感觉交换机只是为那些有线网路设计的，…...
【GD32】MQ-3酒精检测传感器
2.31 MQ-3酒精检测传感器 MQ-3气体传感器所使用的气敏材料是在清洁空气中电导率较低的二氧化锡(Sn0)。当传感器所处环境中存在酒精蒸气时，传感器的电导率随空气中酒精蒸气浓度的增加而增大。使用简单的电路即可将电导率的变化转换为与该气体浓度相对应的输出信号。…...
如何在极狐GitLab 启用依赖代理功能
本文作者：徐晓伟 GitLab 是一个全球知名的一体化 DevOps 平台，很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版，专门为中国程序员服务。可以一键式部署极狐GitLab。 本文主要讲述了如何在[极狐GitLab…...
ES6中 Promise的详细讲解
文章目录 一、介绍状态特点流程 二、用法实例方法then()catchfinally() 构造函数方法all()race()allSettled()resolve()reject() 三、使用场景# 参考文献 一、介绍 Promise，译为承诺，是异步编程的一种解决方案，比传统的解决方案（…...
网站建设也会涉及商标侵权，需要注意些！
以前普推知产老杨碰到建站涉及知识产权侵权的，但是大多数是其它方面的，前几天看到某同行说由于给客户建设网站，由于网站名称涉及商标被起诉要索赔几十万。 当时同行给做网站时还看了下营业执照，上面的主体名称与网站名称也是一致…...
Leetcode算法训练日记 | day25
一、组合总和Ⅲ 1.题目 Leetcode：第 216 题 找出所有相加之和为 n 的 k 个数的组合，且满足下列条件： 只使用数字1到9每个数字 最多使用一次 返回 所有可能的有效组合的列表 。该列表不能包含相同的组合两次，组合可以以任何顺…...
第23次修改了可删除可持久保存的前端html备忘录:增加了百度引擎
第22次修改了可删除可持久保存的前端html备忘录视频背景分离，增加了本地连接，增加了纯CSS做的折叠隐藏修改说明 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport…...
vue3中使用antv-S2表格（基础功能版）
先看展示效果： 可以调整行宽、列宽、自定义字段图标、表头图标、添加排序、显示总计、小计等 首先确保搭建一个vue3项目环境，从0开始的小伙伴着重看第一点： 一、搭建vue3项目环境 首先创建一个vue3vitets项目，可以查看下面相关…...
算数逻辑单元
目录 一、王道考研ppt总结 二、个人理解 一、王道考研ppt总结 二、个人理解 74181是一款经典的ALU 可以进行加减乘除和与或非、异或等计算；还有移位和求补等 输入有一个CU信号，即控制单元信号，有一个M信号，当M为1时，进…...
clickhouse深入浅出
基础知识原理 极致压缩率 极速查询性能 列式数据库管理 ，读请求多 大批次更新或无更新 读很多但用很少 大量的列 列的值小数值/短字符串 一致性要求低 DBMS：动态创建/修改/删除库 表 视图，动态查/增/修/删，用户粒度设库…...
TPS2041A 至 TPS2044A 、TPS2051A 至 TPS2054A
这份文件是德州仪器（Texas Instruments）关于一系列电流限制型电源分配开关的数据手册，型号包括 TPS2041A 至 TPS2044A 和 TPS2051A 至 TPS2054A。这些开关适用于可能遇到重负载电容负载和短路的应用程序。以下是该数据手册的核心内容概要&…...
Excel从零基础到高手【办公】
第1课 - 快速制作目录【上篇】第1课 - 快速制作目录【下篇】第2课 - 快速定位到工作表的天涯海角第3课 - 如何最大化显示工作表的界面第4课 - 给你的表格做个瘦身第5课 - 快速定位目标区域所在位置第6课 - 快速批量填充序号第7课 - 按自定义的序列排序第8课 - 快速删除空白行第…...
AI图书推荐：如何在课堂上使用ChatGPT 进行教育
ChatGPT是一款强大的新型人工智能，已向公众免费开放。现在，各级别的教师、教授和指导员都能利用这款革命性新技术的力量来提升教育体验。 本书提供了一个易于理解的ChatGPT解释，并且更重要的是，详述了如何在课堂上以多种不同方式…...
Redis中的集群(九)
集群 消息 集群中的各个节点通过发送和接收消息(message)来进行通信，我们称发送消息的节点为发送者(sender),接收消息 的节点成为接收者，如图所示。节点发送的消息主要有以下五种: 1.MEET消息:当发送者接到客户端发送的CLUSTER MEET命令时，…...
funasr 麦克风实时流语音识别
参考： https://github.com/alibaba-damo-academy/FunASR chunk_size 是用于流式传输延迟的配置。[0,10,5] 表示实时显示的粒度为 1060=600 毫秒，并且预测的向前信息为 560=300 毫秒。每个推理输入为 600 毫秒（采样点为 16000*0.6=960），输出为相应的文本。对于最后一个语音…...
英语学习笔记-音节划分和字母发音对照表
国际音标 音节划分 英语音节以元音为主体构成的发音单位，一般说来元音发音响亮，可以构成音节，辅音发音不响亮，不能单独构成音节 ((m] (n] [I] 例外)。 从单词拼写形式上看，有几个元字组就有几个音节 音节划分规则 长…...
使用odbc链接dm8数据库
一、环境说明 windows11 VMware Workstation 17 Pro ubuntu22.04 docker $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.3 LTS Release: 22.04 Codename: jammy因docker版本的dm8中，没有…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中，拉取视频流只要求udp方式，从2016开始要求新增支持tcp被动和tcp主动两种方式，udp理论上会丢包的，所以实际使用过程可能会出现画面花屏的情况，而tcp肯定不丢包，起码…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包：import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序（自然排序和定制排序）Arrays.binarySearch()通过二分搜索法进行查找（前提：数组是…...
unix/linux，sudo，其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN，根据VPN原理，打通两个内网必然需要借助一个公共中继节点，ktconnect工具巧妙的利用k8s原生的portforward能力，简化了建立连接的过程，apiserver间接起到了中继节…...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...
AI，如何重构理解、匹配与决策？
AI 时代，我们如何理解消费？ 作者｜王彬 封面｜Unplash 人们通过信息理解世界。 曾几何时，PC 与移动互联网重塑了人们的购物路径：信息变得唾手可得，商品决策变得高度依赖内容。 但 AI 时代的来…...
TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？
在工业自动化持续演进的今天，通信网络的角色正变得愈发关键。 2025年6月6日，为期三天的华南国际工业博览会在深圳国际会展中心（宝安）圆满落幕。作为国内工业通信领域的技术型企业，光路科技（Fiberroad&…...
libfmt: 现代C++的格式化工具库介绍与酷炫功能
libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库，提供了高效、安全的文本格式化功能，是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全：…...
Xcode 16 集成 cocoapods 报错
基于 Xcode 16 新建工程项目，集成 cocoapods 执行 pod init 报错 ### Error RuntimeError - PBXGroup attempted to initialize an object with unknown ISA PBXFileSystemSynchronizedRootGroup from attributes: {"isa">"PBXFileSystemSynchro…...
C++ 变量和基本类型
1、变量的声明和定义 1.1、变量声明规定了变量的类型和名字。定义初次之外，还申请存储空间，也可能会为变量赋一个初始值。 如果想声明一个变量而非定义它，就在变量名前添加关键字extern，而且不要显式地初始化变量： e…...