网页长截图工具 - 滚动捕捉整个页面
输入URL或使用当前页,自动滚动并拼接为一张完整的长图。
UD5工具箱
本工具通过像素级对比自动识别相邻截图的重叠区域。算法会逐行比较第一张截图底部与第二张截图顶部的像素相似度,找到最佳匹配位置,然后将重叠部分裁剪掉,实现无缝拼接。这模拟了人眼识别连续内容的方式,能处理大多数滚动截屏场景。
可能的原因:①截图之间存在较大色差或内容突变(如广告横幅);②重叠区域过小(小于30px)或过大(超过350px);③截图包含大量重复图案(如纯色背景、网格)。遇到这种情况,可以调整"搜索范围"参数或使用"手动偏移调整"进行微调。正偏移值会增大裁剪量,负值则减少。
浏览器对Canvas有最大尺寸限制(Chrome约16384px,Safari约4096px)。如果拼接结果超出限制,系统会自动等比缩放。您也可以选择JPG或WebP格式并适当降低质量来减小文件体积。对于超长截图,建议分批拼接(每批3-5张)。
上传支持 PNG、JPG、WebP、BMP 等主流格式。输出支持PNG(无损压缩,文件较大)、JPG(有损压缩,文件小)和WebP(兼顾质量与体积,推荐)。移动端截图通常为PNG格式,拼接后可根据需要转换格式。
非常重要。截图必须按照滚动方向从上到下的顺序排列。您可以在上传后通过拖拽或上下箭头按钮调整顺序。点击"按文件名排序"按钮可自动按文件名中的数字序号排列,这对于批量截图非常实用。
系统会自动以最大宽度作为拼接画布宽度,较窄的截图会居中放置(两侧留白)。如果宽度差异很大,建议先统一裁剪宽度后再拼接,以获得最佳效果。通常同一设备截取的屏幕截图宽度是一致的。
使用PNG格式输出可保持原始画质(无损压缩)。JPG和WebP格式会有轻微质量损失,但文件体积显著减小。建议对重要截图使用PNG格式,对分享用途使用WebP(质量90%以上几乎看不出差异)。
完全支持。本工具针对移动端做了响应式适配,在手机和平板上都能流畅使用。移动端上传截图尤为方便——直接从相册选择多张截图即可。排序使用箭头按钮操作,拼接和下载均在浏览器本地完成,无需上传到服务器,保护隐私安全。
输入URL或使用当前页,自动滚动并拼接为一张完整的长图。
输入宽高、背景色和文字,生成对应尺寸的占位图片,适用于原型设计和文档填充。
设置限制行数,生成带“更多”按钮的纯CSS或轻JS截断方案。
生成漂亮几何图案或文字占位图,指定尺寸,下载用于原型。
加载本地视频,拖动时间轴选取帧,捕获该帧为PNG图片下载。
将HTML表格转换为移动端友好的折叠行显示模式,并生成相应CSS。
使用html2canvas截取当前网页的完整内容(需粘贴HTML或演示),生成长图并下载。
输入网址,使用浏览器渲染并转换为可下载的PDF文件(纯前端模拟)。
自定义尺寸、背景色、文字,纯前端生成占位图,适用于原型设计和网页排版,无需依赖外部服务。
选择基本形状(六边形、菱形等)和配色,无缝拼接生成SVG几何背景图案。
选择页眉、侧边栏、主体、页脚的网格布局,生成基本的布局骨架代码。
生成用于网页游戏或展示的动态血量/进度条样式代码,支持渐变和闪烁。
在字符网格上通过工具绘制猫、超人等各种图案,导出为.txt ASCII艺术。
设定书脊宽度,排版书名和出版社文字,模拟书脊在书架上的外观。
编写或配置基础的CSS渐变、径向、锥形图案组合,生成美观的无缝重复背景代码。
通过随机组合意象、动词和连接词生成现代诗短句,每次点击都有新创意。
显示巨大的纯数字时间,支持12/24小时制,夜间模式,适合作为工作或学习桌面时钟。
为应用的空白页(如无订单、无消息)生成带插画和文案的HTML/CSS占位组件。
提供JSON Schema定义,自动生成符合约束的示例JSON数据,用于接口文档说明。
可视化选择设备类型、屏幕方向和宽度范围,一键生成标准CSS媒体查询代码。
在可缩放网格上逐点绘制像素艺术,支持调色板、橡皮擦和导出PNG。
粘贴SVG代码,移除无用命名空间、注释与默认属性,减小文件体积,提升加载速度。
拖拽设计包含 Subgrid 的嵌套网格,直观展示子网格如何继承父网格轨道并进行独立调整,生成代码。
输入网址,抓取并展示该页面的标题、描述、OG标签和Twitter Card信息。
直接编写SVG代码并实时预览,或通过基本形状工具绘制矩形、圆形、路径,适合动态图形调试。
在页面移动鼠标时显示十字参考线和像素距离,方便UI开发。
逐帧在Canvas上绘制,预览连续播放效果,并可导出为GIF或WebM动画。
动画展示调用栈、宏任务和微任务的执行顺序,帮助理解JS异步机制。
按类型筛选状态码,点击查看详细描述与常见使用场景,开发调试速查手册。
为上传的照片添加可调节的三分线、斐波那契螺旋等构图辅助线。