离线 · 无上传 · 浏览器本地完成Offline · no uploads · runs in the browser
HTML 转 JPG——离线、一页一图、不上传HTML to JPG offline — one image per A4 page
这条路是**两步、一次损失**:`html>pdf` 把净化后的文档整篇渲染成一张画布,再按 A4 的毫米比例算出页数(页高 = 画布高 × 210 ÷ 画布宽,每 297 mm 一页向上取整),把这张画布切成同高的片段(最后一片按剩余高度收齐),**每片以无损位图(`toDataURL` 的 PNG 那一条)嵌进 PDF**;`pdf>jpg` 再把这份 PDF 每一页转成一张 JPEG。为什么图片出口要走 PDF 这一遭而不直接截长图:注册表里对同分的图片终点用 `edgePreference` 排序(`html>pdf` 是 0、`html>png` 是 10,小的优先),而 `html>png→jpg` 那条路交回的是「整篇文档按页面宽度排布的一条长带」——分页与页边界正是多页文档想要的答案;那条路上真正有害的是**两次 JPEG 编码**,它在源头被解决(切片存 PNG),而不是靠改路由避开。三件具体的事跟着来:**一页一图**,两页以上以 ZIP 交付;**白色铺底**,画布按 `#ffffff` 生成,原来的透明区域在图里是白;**密度不在这一格调,但不等于「绝不生效」**——没设过密度时中间那份 PDF 按默认 144 转图;滑杆只对「以 PDF 作为输入」的转换开放,而从上一批 PDF 转换留下的密度值会一路被带到每一步,包括这里的这一次。要说清的边界:最后那道编码是有损的(质量与目标体积就是为它准备的档位,目标体积先降质量、再缩尺寸去追);产物是位图,里面没有可选中的文字;渲染前会剥掉指向网络与相邻路径的子资源引用,取不到字节的图片按张数在结果卡披露,所以「打开一张网页转出的图,顺带把它的广告像素拉回来」这种事不会发生。脚本从头到尾不执行:净化那一步删掉可执行标记,渲染用的 iframe 只给 `allow-same-origin`、没有 `allow-scripts`。全程在这个标签页里完成,只有 storage 权限。This route is two steps with one loss: `html>pdf` renders the sanitised document into a single canvas, computes the page count from the A4 metric ratio (page height = canvas height × 210 ÷ canvas width, rounding up every 297 mm), slices that canvas into strips of one height, the last cut to what remains and **embeds each strip as a lossless bitmap (the PNG branch of `toDataURL`)**; `pdf>jpg` then turns each page of that PDF into a JPEG. Why an image exit travels through PDF instead of grabbing the tall canvas: the registry orders tied image ends by `edgePreference` (0 on `html>pdf`, 10 on `html>png`, lower first), and the `html>png→jpg` path hands back one strip laid out at page width — page bounds are the answer a multi-page document actually wants. What was genuinely harmful on that path was the **double JPEG encode**, fixed at the source by storing the slices as PNG rather than dodged by re-pointing the route. Three concrete things come with it: **one image per page**, two or more delivered in a ZIP; **a white ground**, because the canvas is produced on `#ffffff`, so transparent areas land as visible white; and **no density dial here, which is not the same as “it never applies”**: with nothing set the intermediate PDF rasterises at the default 144, and although the panel offers the slider only for conversions taking a PDF as input, a density left behind by an earlier PDF batch is forwarded to every step — including this one. The boundaries, stated: the final encode is lossy (quality and target size are its dials, and a target size goes down the quality ladder before it scales the picture); the artifact is a bitmap with no selectable text; and sub-resource references to the network or sibling paths are stripped before rendering, with unretrievable images disclosed by count on the result card — so a converted page cannot fetch its ad pixels on the way to becoming a picture. Nothing executes: sanitising removes the executable markup and the render frame is sandboxed to `allow-same-origin` with no `allow-scripts`. All of it inside this tab on the storage permission.
这条链路怎么走How the route runs
HTMLHTML PDFPDF JPEGJPEG
共 2 步,由扩展的路径搜索自动选出,中间产物不落盘。2 steps, chosen by the extension's own path search; intermediate results never touch the disk.
会保留什么What carries over
- 一页一图:页数由 A4 比例下的排版高度决定,长网页得到的是成组的页面而不是一条长带One image per page: the count follows the laid-out height under the A4 ratio, so a long page becomes a set of pages rather than one long strip
- 切片无损:中间那份 PDF 的每一页存的是 PNG,压缩只在最后转 JPEG 那一次发生The slices are lossless: each page in the intermediate PDF is stored as PNG, so compression happens once, on the final JPEG
- 透明区域落白:画布按 `#ffffff` 生成、每页嵌入前再铺一次,而 JPEG 本来也没有透明度可保留Transparent areas land on white: the canvas is produced on `#ffffff`, each page is filled again before embedding, and a JPEG has no alpha left to keep
- 不执行也不取码:脚本不跑、远程图片与字体不取字节,缺字节的图片按张数披露Nothing runs and nothing is fetched: no scripts, no remote images or fonts, with images that have no bytes disclosed by count
如实说明的限制What it does not do
- 最后那道编码是有损的:要严格还原同一套线条与字形请走 HTML→PNG(整页一张长图、无第二次量化)The last encode is lossy: take HTML to PNG for an exact rendering of the same rules and glyphs (one tall canvas, no second quantisation)
- 这一格不摆密度滑杆(面板只对以 PDF 为输入的转换给它):没设过时中间 PDF 按默认 144 转图,而上一批 PDF 留下的密度值会被带进这一步This route exposes no density slider (the panel offers it only for conversions taking a PDF as input): with nothing set the intermediate PDF rasterises at the default 144, while a density left from an earlier PDF batch is forwarded into this step
- 两页以上出 ZIP:里面的单张文件按 `page-N.jpg` 编号取名Two or more pages arrive as a ZIP, the individual pictures named `page-N.jpg`
- 一次最多渲染 200 页(`MAX_PDF_IMAGE_PAGES`):超过就报「要渲染的页数过多」,并让你用页码范围只选需要的页或先把文件拆开——每一页在编码前各自占着一张全尺寸画布,200 页已经是数百 MB,再往前是标签页自己崩掉,那比一条错误难说清得多At most 200 pages rasterise in one pass (`MAX_PDF_IMAGE_PAGES`): past that the route reports “too many pages to render at once” and points at a page range or splitting the file — every page holds a full-size canvas until it is encoded, 200 of them is already hundreds of megabytes, and beyond that the tab crashes itself, which is far harder to explain than an error
- 图里没有可复制的文字:不能选中、搜索或朗读,要这些请保留 HTML 或转 TXT / MarkdownNo copyable text inside the image: nothing to select, search or read aloud — keep the HTML, or take TXT / Markdown, for that
- 控件会被画进图里(任务清单的复选框正是这样出现的),但图里没有任何可点的东西:产物是排版出来的某一瞬,不是一个可交互的页面Controls are painted into the image — that is how a task-list checkbox appears — yet nothing in it responds: the artifact is one laid-out instant, not a page you can operate
实操提示Working with it
- 要一份能打印归档的:HTML→PDF,页面就是文档本身,不必再拼回For a document instead of a stack of images: HTML to PDF, one multi-page file
- 要严格无损的一张图:HTML→PNG,整页捕获、没有第二次量化For one exactly-lossless picture: HTML to PNG, a whole-page capture with no second quantisation
- 要继续加工数据:网页里的表格用 HTML→CSV / HTML→JSON 取值,图片这一格交付的是版面To keep working on the data: take HTML to CSV or JSON for the values — this page delivers the layout
常见问题Questions people actually ask
为什么一份网页转出来是很多张图,而不是一张长图?Why do I get several images rather than one tall one?
因为图片终点在同分时按 `edgePreference` 排序(`html>pdf` 0、`html>png` 10),这条链因此交回 A4 分页;想要一张连续长图的是 PNG 那一格(整页一次捕获,上限 32768 px)。两种形状都在,选哪种由你点的目标决定。Because the tied image ends are ordered by `edgePreference` (0 on `html>pdf`, 10 on `html>png`), so this route yields A4 pages; the single continuous picture is the PNG page, which captures the whole document into one canvas bounded at 32768 px. Both shapes exist, and the target you pick decides which you get.
两次编码会不会把文字越压越糊?Does encoding twice smear the text progressively?
这条链只有一次有损:切片进 PDF 时存的是 PNG,最后的 JPEG 是唯一一次压缩。早先确实有过「PDF 里塞 JPEG、再转一次 JPEG」的两次压缩,那一版被换掉了——修的是切片的存储格式,不是把路由改道。There is one lossy step here: slices enter the PDF as PNG, and the final JPEG is the only compression. An earlier shape really did embed JPEG in the PDF and encode it again; that version was replaced — the fix was the slice format, not re-pointing the route.
打开这份 JPG 会把网页里的图片再拉回来吗?Will opening the JPG re-fetch the page’s images?
不会。产物是位图,里面不含指向任何东西的引用;生成它的那一步在渲染前已经把指向网络与相邻路径的子资源引用剥掉,取不到字节的图片会在结果卡上按张数写明。扩展本身只有 storage 权限。No. The artifact is a bitmap carrying no reference to anything, and the step that made it strips sub-resource references before rendering, disclosing unretrievable images by count on the result card. The extension itself holds only the storage permission.
不需要账号,也不需要联网:装好扩展后点图标,在新标签页里打开工作台,文件从磁盘直接选。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.