离线 · 无上传 · 浏览器本地完成Offline · no uploads · runs in the browser
JSON 转 WebP——离线、把查看器那页排成图JSON to WebP offline — the viewer, imaged
这条路先把 JSON 变成**结构查看器那份 HTML**，再把它排成图片：`json>html` + `html>pdf` + `pdf>webp`（基线现读）。所以图里看到的不是原始文本的换行，而是查看器的产物——每个键值一行、`Array(n)` / `Object(n)` 这类摘要、语法着色的配色，都在那一步定下来；**缩进是 CSS 画的，不是字符**，因此图里对齐得整整齐齐，可那些空白并不能被复制出来（反正产物本来就是像素）。两件必须说清的事：一，查看器**有预算上限**（节点数、单键长度、单个标量长度），触顶时它会写明「实际读了多少」，而这段提示属于页面内容，**会跟着一起进图**——这是刻意的，半棵树冒充整份文档比一条报错更难查；二，这份图是按 A4 分页的**一页一张 WebP**，中间经过一份 PDF（PNG 无损切片），终点才做一次有损量化，质量与目标尺寸只作用在那一步。边界照第五十轮的模板写：宽度没有闸，超过约 800 px 版心的长行是被裁掉而不是换行；高度有闸，排版超过 32768 px 时渲染那一步报 `errors.renderTooTall`，所以巨大的 JSON 请先分批；也正因为同一道闸，这份中间 PDF 排不到几百页，出图那一步的页数上限在这条链上碰不到。没有选页参数（页码选择只在源是 PDF 时存在）。要把数据交给程序，走 JSON→CSV / TXT 那几页；要一份可归档的文档，走 JSON→PDF 或 JSON→Word。全程只有 storage 权限、不联网。This route first turns the JSON into **the structure viewer’s HTML**, then images that page: `json>html` + `html>pdf` + `pdf>webp`, read live from the baseline. So what reaches the image is not the raw text’s line breaks but the viewer’s product — one line per key and value, `Array(n)` / `Object(n)` summaries, the syntax colouring, all fixed at that step. **The indentation is drawn by CSS, not by characters**, so the picture lines up beautifully while those spaces are nothing you could copy out (the artifact is pixels anyway). Two things have to be said. The viewer runs on **budgets** (node count, key length, scalar length), and when one is hit it states how much it actually read — that notice is part of the page, so it **rides into the image** on purpose: a half-shown tree passing itself off as the whole document is harder to diagnose than an error. And the output is **one A4 sheet per WebP**, made through an intermediate PDF of lossless PNG slices, with the single lossy quantisation at the endpoint where quality and target size apply. The boundaries follow this family’s template: nothing gates width, so a line past the ~800 px measure is clipped rather than wrapped; height is gated, past 32768 px of laid-out page the render step fails with `errors.renderTooTall`, so a giant JSON should be split first — and since that same ceiling keeps the intermediate PDF from growing to hundreds of pages, the image step’s page cap is unreachable here. There is no page-range control (it exists only when the source is a PDF). To hand data to a program take JSON to CSV or TXT; for an archivable document take JSON to PDF or Word. All of it on the storage permission, with no network.
这条链路怎么走How the route runs
JSONJSON HTMLHTML PDFPDF WebPWebP
共 3 步，由扩展的路径搜索自动选出，中间产物不落盘。3 steps, chosen by the extension's own path search; intermediate results never touch the disk.
会保留什么What carries over
- 排版在第一步就定好：键值一行、`Array(n)` / `Object(n)` 摘要与语法着色都进图The layout is settled in step one: one line per key and value, `Array(n)` / `Object(n)` summaries and syntax colouring all reach the image
- 预算触顶的提示属于页面内容，会跟着一块儿进图，不让半棵树冒充整份文档A budget notice is page content, so it rides into the image rather than letting a partial tree pose as the whole document
- 整条链只量化一次：中间是 PNG 无损切片，质量与目标尺寸只作用在 WebP 终点One quantisation on the chain: the middle is lossless PNG slices, quality and target size act only on the WebP endpoint
- 按 A4 逐页一页一张，多页打包成 ZIP、条目按页顺序命名Paginated on A4, one WebP per page; several pages arrive as a ZIP numbered in page order
- 一批最多 200 个文件、单个 100 MB，与其他路线共用同一道闸门Up to 200 files per batch and 100 MB each — the same gate every other route shares
如实说明的限制What it does not do
- 缩进与对齐是 CSS 画的，不是字符：图里看着整齐，那些空白无法复制Indentation and alignment come from CSS, not characters: the picture looks tidy but those spaces cannot be copied
- 宽度没有闸：超过约 800 px 版心的长行被裁掉而不是换行，深层结构请先看摘要行Nothing gates width: lines past the ~800 px measure are clipped, not wrapped — rely on the summary rows for deep structures
- 高度有闸：排版超过 32768 px 报 `errors.renderTooTall`，巨大 JSON 要分批（JSON→PDF 同一道闸）Height is gated: past 32768 px it fails with `errors.renderTooTall`, so huge documents need splitting (JSON to PDF shares that ceiling)
- 产物是像素：里面的键名与值不能被选中、搜索或读回；要数据走 JSON→TXT / CSVThe artifact is pixels: keys and values cannot be selected, searched or read back — take JSON to TXT or CSV for data
- 没有选页这一步：分页来自排版，页码选择只在源是 PDF 时存在There is no page-range step: pagination comes from layout, and the range control exists only when the source is a PDF
实操提示Working with it
- 要一份能归档的文档：JSON→PDF 或 JSON→Word，那里排版是同一套For an archivable document: JSON to PDF or Word, laid out by the same machinery
- 要文字形式的结构：JSON→TXT，每行一键值、层级由换行与摘要表达For structure as text: JSON to TXT, one line per key and value with hierarchy in breaks and summaries
- 要最通用的分页图片：JSON→JPG 是同一条三步链，终点换成 JPEGFor the most universally readable paginated picture: JSON to JPG, the same chain ending in JPEG
常见问题Questions people actually ask
图里的 JSON 是格式化过的还是原始的？Is the JSON in the image formatted or raw?
是查看器版式：一行一键值、带语法着色的配色、大数组和大对象会被折成 `Array(n)` / `Object(n)` 这类摘要行而不是全部展开。也就是说它更像「把预览截图」，而不是把文本换个背景。要原样文本请走 JSON→TXT 或直接看源文件。The viewer’s layout: one line per key and value, syntax-colouring palette, and large arrays and objects collapsed into `Array(n)` / `Object(n)` summary rows rather than fully expanded. It is closer to a screenshot of the preview than to text on a new background. For the literal text take JSON to TXT or open the source.
很大的 JSON 会怎样？会被切成几百页吗？What happens with a very large JSON — hundreds of pages?
不会走到那么多页。查看器自己有预算上限，触顶会在页面上写明实际读了多少，这段提示会跟着一块进图；再往外，排版高度超过 32768 px 时渲染那一步直接报 `errors.renderTooTall`，所以大文档要先分批——同一道闸也意味着出图那一步的页数上限在这条链上碰不到。It never gets to hundreds. The viewer has its own budgets and states on the page how much it actually read when one is hit, and that notice enters the image with everything else; beyond that, past 32768 px of laid-out height the render step fails with `errors.renderTooTall`, so large documents must be split first — the same ceiling is why the image step’s page cap is unreachable on this chain.
为什么不直接截屏工作台？Why not just screenshot the workbench?
因为产物只该有内容。这条路把查看器那份文档单独渲染成图，不带工具栏、按钮与页面框架；宽度和高度限制也是同一套（800 px 版心、单次渲染高度上限），所以它和工作台截图是两件事：一张是可交付的图，一张是界面照片。Because the artifact should contain only content. This route renders the viewer’s document on its own, without the toolbar, buttons or page frame, and it carries the same measure and height limits (an 800 px column, a single-pass height ceiling). So it is not a screenshot of the workbench: one is a deliverable image, the other is a photograph of an interface.
不需要账号，也不需要联网：装好扩展后点图标，在新标签页里打开工作台，文件从磁盘直接选。No account and no network: install the extension, click its icon, and the workbench opens in a new tab reading straight off your disk.
从 Chrome 应用商店安装Install from the Chrome Web Store 安装步骤Install steps GitHub 源码Source on GitHub
要把它压到指定体积？Need it under a target size? The 图片压缩工具image compressor可以在浏览器里重编码 PNG / JPEG / WebP。 re-encodes PNG / JPEG / WebP in the browser.