CSS 动画曲线编辑器 - 贝塞尔可视化重定义
拖动曲线手柄调整动画缓动,实时预览弹跳或淡入效果,生成cubic-bezier值。
UD5工具箱
基于索贝尔算子(Sobel Operator)的图片轮廓提取 — 在线免费、快速精准
拖拽图片到此处
支持 JPG / PNG / WebP / BMP,最大 4096px
或点击左侧「选择图片」按钮 | 支持 Ctrl+V 粘贴
索贝尔算子是一种经典的边缘检测算法,由Irwin Sobel于1968年提出。它通过两个3×3的卷积核分别计算图像在水平方向(Gx)和垂直方向(Gy)的亮度梯度近似值,然后合并两个方向的梯度来检测边缘。
核心卷积核:
Gx(检测垂直边缘)= [[-1,0,1], [-2,0,2], [-1,0,1]]
Gy(检测水平边缘)= [[-1,-2,-1], [0,0,0], [1,2,1]]
梯度幅值 = √(Gx² + Gy²),梯度越大表示该位置越可能是边缘。
阈值是边缘检测中最关键的参数:
建议从默认值60开始,根据图片特点微调。细节丰富的照片可适当提高阈值,线条简单的图形可降低阈值。
索贝尔算子:简单快速,仅计算一阶梯度,适合快速提取轮廓。对噪声较敏感,边缘线条较粗。
Canny算法:多阶段处理(高斯平滑→梯度计算→非极大值抑制→双阈值连接),边缘更细、更连续,但计算量更大。
本工具使用索贝尔算子并提供模糊预处理选项,在保持速度优势的同时有效减少噪声干扰,是日常使用的理想选择。
真实照片中往往存在高频噪声(如ISO噪点、压缩伪影),这些噪声在梯度计算中会产生虚假边缘。通过在索贝尔算子之前应用高斯模糊,可以有效平滑噪声,使检测结果更干净。
模糊等级0表示不进行预处理(适合干净的数字图形),等级3-4适合高噪点的照片。建议从等级1开始尝试。
边缘检测广泛应用于:
本工具支持JPG、PNG、WebP、BMP、GIF(仅首帧)等主流格式。建议使用清晰度较高的图片以获得最佳效果。
处理后的边缘检测结果可自由使用,包括商业用途。本工具完全在浏览器本地运行,您的图片不会上传到任何服务器,隐私安全有保障。
拖动曲线手柄调整动画缓动,实时预览弹跳或淡入效果,生成cubic-bezier值。
在等轴测网格上绘制建筑或场景,支持多图层及调色板,导出等轴测像素艺术作品。
调整滚动容器和子项的对齐方式、停止点,观察CSS Scroll Snap平滑滑动效果。
粘贴HTML和CSS,工具将尝试分析并为你抽取首屏内联样式,辅助性能优化。
在画布上通过控制点绘制曲线与直线,生成对应的SVG <path> d属性字符串,方便插画引用。
调整X和Y方向的频率和相位,绘制多样的利萨茹曲线图案。
粘贴以data:开头的链接,自动判断MIME类型并预览内容,或提供下载按钮。
通过Canvas调整图片的宽度和高度,支持保持比例或自定义尺寸,快速修改图片分辨率并下载。
使用Seam Carving算法逐步移除图片中不重要的像素线以缩小尺寸,前端模拟教学。
拖拽改变容器宽度,观察使用container-type和@container规则的元素如何自适应样式。
粘贴Sitemap XML内容,解析并列出所有包含的URL地址。
上传疑似隐写图片,提取每个像素的最低位,尝试恢复隐藏的文本或数据。
分解URL为协议、主机、端口、路径、查询字符串和哈希等各个组成部分,便于理解与调试。
选择卡片、列表或表格布局,生成对应的灰色闪烁骨架屏HTML/CSS代码。
上传合并的精灵图,设定行数和列数,自动裁切为单独的小图并打包下载。
输入URL提取OG标签,模拟Facebook/Twitter/LinkedIn卡片显示效果,优化链接分享。
将深度嵌套的JSON对象转化为用点号或括号分隔的单层键值对,便于数据清洗。
支持Code128、EAN等常见一维码的摄像头实时解读或从图片识别,显示编码数字。
利用浏览器原生API录制屏幕共享或窗口,选择音频源,导出为WebM视频。
输入网址,抓取该页面上的出入链接并绘制成节点关系草图。
上传图片,转换为带颜色和符号的网格图,辅助制作十字绣图纸。
随机生成整数数组,逐步展示按低位优先进行的基数排序过程,辅助算法理解。
浏览数十种纯CSS加载旋转器,点击复制代码或自定义颜色尺寸,节省开发时间。
上传多张小图标,自动合并成一张Sprite图,并生成对应CSS背景定位代码,提升加载性能。
集成ASCII/Hex/Base家族/Quoted-Printable/UUencode等多种编码一键互转,支持智能识别与链式解码。
基于方形或六边形网格,通过变形滑块创建有趣的密铺镶嵌图案。
为按钮或卡片配置悬停时的边框、阴影、缩放、颜色等动画,自动生成CSS transition代码。
自定义套餐名、价格、功能列表,生成对比式价格表UI的HTML/CSS代码。
通过滑块调节LCP、FID、CLS等指标值,实时显示对应的谷歌核心网页指标评分与颜色。
加载测试页面,实时显示Largest Contentful Paint等核心指标,了解加载体验。