二维码在线解码器 - 摄像头或图片读取QR Code
使用摄像头实时扫描或上传图片解码二维码,快速获取内部文本或链接,前端识别安全快速。
UD5工具箱
使用浏览器原生 ImageDecoder API 高性能解码 JPEG / PNG / GIF / WebP / AVIF 图像帧
或点击选择文件 · 支持 JPEG / PNG / GIF / WebP / AVIF / BMP
也可使用 Ctrl+V 粘贴剪贴板中的图像
解码后图像将在此显示
createImageBitmap 回退方案,功能可能受限。建议使用 Chrome 94+ 或 Edge 94+ 以获得完整体验。
WebCodecs ImageDecoder 是 Chromium 浏览器(Chrome 94+、Edge 94+)内置的低级图像解码 API,允许开发者直接从原始编码数据(JPEG、PNG、GIF、WebP、AVIF 等格式)中解码出 VideoFrame 对象。相比传统的 createImageBitmap 或 <img> 标签,它提供了更精细的控制,包括逐帧解码、颜色空间信息读取、像素格式访问等高级功能。
截至 2025 年,Google Chrome 94+、Microsoft Edge 94+、Opera 80+ 以及基于 Chromium 的浏览器均完整支持 ImageDecoder API。Firefox 和 Safari 目前尚未完全支持 WebCodecs 规范。本工具会自动检测浏览器能力,在不支持时使用 createImageBitmap 回退方案进行基础解码。
JPEG 使用有损压缩,基于 DCT(离散余弦变换),解码后像素格式通常为 YUV 相关格式(如 I420),颜色空间通常为 BT.709 或 BT.601。PNG 使用无损压缩(DEFLATE 算法),解码后通常为 RGBA/BGRA 格式,颜色空间通常为 sRGB。ImageDecoder 可以透明处理这些差异,并暴露底层的像素格式和颜色空间信息。
VideoFrame 是 WebCodecs API 中的核心对象,代表一帧解码后的视频或图像数据。它包含像素数据、显示尺寸、编码尺寸、时间戳、持续时间以及颜色空间等元信息。与 HTMLImageElement 不同,VideoFrame 是"裸"的像素缓冲区,需要手动管理生命周期(调用 close() 释放内存),但这也使得它非常适合高性能图像处理场景。
不会。所有解码操作完全在您的浏览器本地执行,图像文件不会离开您的设备。WebCodecs API 在客户端沙箱中运行,解码后的 VideoFrame 数据仅存在于内存中,刷新页面或关闭标签页后即被清除。这是本工具相比在线图像处理服务的一个重要隐私优势。
ImageDecoder 支持 JPEG、PNG、GIF(含动画)、WebP(含动画)、AVIF(含动画)、BMP 和 ICO 格式。对于动画 GIF/WebP/AVIF,本工具会自动检测帧数并启用帧导航功能,您可以逐帧浏览动画的每一帧,查看每帧的时间戳和持续时间。
颜色空间信息(原色、传输特性、矩阵系数)决定了图像像素值如何映射到实际显示颜色。例如,BT.709 是 HDTV 标准,sRGB/IEC 61966-2-1 是 Web 图像最常用的色彩空间。了解这些信息对于色彩关键的图像处理工作流(如印刷、视频后期)非常重要,可以避免色彩偏移问题。
解码速度受多个因素影响:图像分辨率(像素总数)、压缩算法复杂度、硬件加速可用性以及浏览器实现优化。JPEG 解码通常比 PNG 快(因为 JPEG 的 DCT 解码在硬件层面有优化),而高分辨率图像(如 8000×6000 像素)需要处理大量数据。本工具会显示实际解码耗时,帮助您评估性能。
使用摄像头实时扫描或上传图片解码二维码,快速获取内部文本或链接,前端识别安全快速。
上传GIF并自动水平平铺提取各帧,生成对应的CSS精灵图定位代码。
上传GIF动图,将所有帧提取出来并打包下载为单个PNG文件,用于修改分析。
上传序列帧图片,合成spritesheet并生成对应CSS steps()帧动画代码。
粘贴代码并选择高亮主题,将代码片段渲染为精美的PNG图片,便于社交媒体分享。
粘贴代码自动进行语法高亮显示,支持主流编程语言,生成带行号的HTML代码块,方便嵌入博客。
上传PDF文件,逐页渲染并可将任意页面导出为PNG图片,基于pdf.js本地解析,无需安装插件。
生成带闪烁或循环色彩的动态GIF二维码,增加扫码趣味性。
在图像上点击,利用前端模型将点击范围内的主要物体自动从背景分离。
从上传的图片中提取主要颜色或指定像素的RGB/HEX值,生成图片调色板,辅助配色设计。
生成形似iOS或Android的开关切换按钮,支持动画和自定义颜色。
向任意输入URL发送请求,清晰显示响应状态码、头信息和体,类似轻量级Postman。
通过Canvas生成不同粒度、颜色的噪点纹理图片,适合用作页面背景或叠加。
上传图片并在白色、黑色、透明等背景上预览效果,辅助电商首图或UI元素设计。
上传视频,截取其中一小段并转换GIF,可调帧率和尺寸,前端转换。
在线对图片应用高斯模糊滤镜,可通过滑块调节模糊半径强度,实时预览效果并下载。
展示一些常用内置HTML元素和自定义元素例子,提供代码复制。
在单页内模拟MPA过渡效果,自定义进场/出场动画,体验View Transitions API丝滑切换。
选中页面上的某个HTML元素,利用html2canvas将其渲染为PNG图片下载。
从上传的图片中智能提取主要渐变色方向与色标,生成对应CSS渐变代码,用于设计背景。
使用Permissions API检查摄像头、地理位置、通知等权限的当前状态和可查询性。
上传图片,自动提取主色并基于色轮生成类比色、互补色等调色板方案。
将两到三张有重叠的手持照片拖入,手动寻找重叠区域自动混合为宽幅全景图。
输入行与列的线索数字,自动求解逻辑绘图谜题并显示像素图。
定义端点、JSON响应体和延迟毫秒,模拟后端API供前端本地开发调试。
加载本地视频,定位到任意时间点并捕获当前帧为图像,支持连续捕获多帧。
输入多个维度的数值,自动绘制蜘蛛网雷达图,支持多组数据叠加比较。
分别使用 WebGPU 和 Canvas 2D 绘制复杂渐变,实时对比帧率与 CPU/GPU 占用,展示硬件加速优势。
输入最小视口和最大视口下的字号,生成利用clamp()的流畅缩放字体规则。
生成用于网页各区块间的波浪或倾斜过渡分割线,导出为SVG或CSS代码。