离线 · 无上传 · 浏览器本地完成Offline · no uploads · runs in the browser
Markdown 转 JPG——离线、A4 分页逐页编码、不上传Markdown to JPG offline — A4 pages, no upload
一组页面图能把长笔记按渲染结果原样递出去——贴过去的文字会被对面那套渲染器重新排版。三步:`md>html` 用 marked 按 GFM 渲染(管道符表格、删除线、任务清单、自动链接都被认出;段落里单个换行仍是续行),过 DOMPurify 的 html + svg 两套 profile(**文档里的内联 SVG 图形不会被删**),再套上自带的样式表;`html>pdf` 把这份文档整篇渲染成一张画布并按 A4 比例算页数、切成等高片段,**每片段以无损位图(PNG)嵌进 PDF**;`pdf>jpg` 再逐页转成 JPEG。所以形状与 HTML→JPG 完全相同(一页一图、两页以上 ZIP、透明铺白),差别都在第一段:Markdown 的语法在这一步变成排版,`#` 变成标题、`- 项目` 变成列表项、表格变成带边框与条纹的表。同分图片终点由 `edgePreference` 排序(`html>pdf` 0、`html>png` 10,小的优先),这条链因此交回分页而不是一条长带;那条路上真正有害的两次 JPEG 压缩已在源头修掉(切片存 PNG)。要照实说的四条:最后那道编码是有损的,质量与目标体积就是它的档位(目标体积先降质量、再缩尺寸);中间那份 PDF 转图用默认密度,这一格没有那个滑杆;产物是位图,没有可选中、可搜索的文字;**Markdown 里以网络地址或相邻路径引用的图片取不到字节**——渲染前会剥掉这些引用,结果卡按张数披露,替换处是一个虚线方框,解不开的那种则直接留空。脚本不执行、全程离线,只有 storage 权限。A set of page images hands a long note over exactly as this extension rendered it, which pasted text cannot do — the receiving side re-lays that out in its own renderer. Three steps: `md>html` renders through marked as GFM (pipe tables, strikethrough, task lists and autolinks are recognised; a single newline stays a soft wrap), passes DOMPurify’s html and svg profiles — **so an inline SVG diagram in the document is not deleted** — and is wrapped in the bundled stylesheet; `html>pdf` renders that document into one canvas, computes the page count from the A4 ratio, slices it into equal-height strips and **embeds each strip losslessly as PNG**; `pdf>jpg` then turns each page into a JPEG. The shape is therefore identical to HTML to JPG (one image per page, a ZIP from two pages up, transparency flattened to white), and what differs is the first leg: Markdown syntax becomes layout there — `#` turns into a heading, `- item` into a list item, a table into bordered and striped cells. Tied image ends are ordered by `edgePreference` (0 on `html>pdf`, 10 on `html>png`), which is why this route returns pages rather than one long strip; the genuinely harmful double JPEG on the other path was fixed at its source by storing the slices as PNG. Four things stated plainly: the final encode is lossy, with quality and target size as its dials (a target size lowers quality before it scales the picture); the intermediate PDF is rasterised at the default density, which this route does not expose; the artifact is a bitmap with no selectable or searchable text; and **images the Markdown points at by network address or sibling path have no bytes** — those references are stripped before rendering, the count is disclosed on the result card, and a replaced spot is either a dashed box or simply left blank. No scripts run, everything is offline, and the only permission is storage.
这条链路怎么走How the route runs
MarkdownMarkdown HTMLHTML PDFPDF JPEGJPEG
共 3 步,由扩展的路径搜索自动选出,中间产物不落盘。3 steps, chosen by the extension's own path search; intermediate results never touch the disk.
会保留什么What carries over
- 语法变成排版:标题、列表、任务清单与表格按 GFM 渲染后再进图,图里看到的就是渲染结果Syntax becomes layout: headings, lists, task lists and tables render as GFM before they are imaged, so the picture shows the rendered document
- 内联 SVG 图形保留:净化同时挂 html 与 svg 两套 profile,示意图不会因「不是 HTML 标记」被删Inline SVG diagrams survive: sanitising runs the html and svg profiles together, so a sketch is not deleted for not being HTML
- 一页一图且切片无损:片段以 PNG 进 PDF,压缩只在最后转 JPEG 那一次发生One image per page with lossless slices: strips enter the PDF as PNG, and compression happens once, on the final JPEG
- 透明铺白、多页成 ZIP:形状与 HTML→JPG 一致,长笔记是一组页面图而不是一条长带White ground and a ZIP from two pages up: the same shape as HTML to JPG, a set of pages rather than one long strip
如实说明的限制What it does not do
- 最后那道编码有损:要严格还原同样的线条与字形请走 Markdown→PNG(整页一张长图、无第二次量化)The final encode is lossy: take Markdown to PNG for an exact rendering (one tall canvas, no second quantisation)
- 引用的图片取不到字节:以网络地址或相邻路径写的图会被剥掉引用,结果卡按张数披露,位置是虚线方框或空着Referenced images have no bytes: those written as network addresses or sibling paths lose their references, the card reports the count, and a spot is either a dashed box or left blank
- 一次最多渲染 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
- 这一格不摆密度滑杆(面板只对以 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 travels into this step
- 代码块与正文都在 800 px 的最大宽度内排版:样式表给正文 `word-wrap / overflow-wrap: break-word`,也留给 `<pre>` 本身 `overflow-x: auto`,两条规则作用在不同元素上,图按渲染出来的那一种落定Code and prose lay out inside the 800 px measure: the stylesheet sets `word-wrap / overflow-wrap: break-word` on the body and keeps `overflow-x: auto` on `pre`, two rules on different elements, and the image reproduces whichever the render settled on
- 图里没有可复制的文字,也不承诺能读回 Markdown:要编辑请保留 `.md`,要结构请走 Markdown→HTML / WordNo copyable text inside the image and no promise of reading Markdown back out: keep the `.md`, or take HTML / Word when you want structure
实操提示Working with it
- 要一份可打印的成品:Markdown→PDF,页面就是文档本身For a printable document: Markdown to PDF, whose pages are the file itself
- 要一张不分页的长图:Markdown→PNG,整页一次捕获(上限 32768 px)For one unpaginated tall image: Markdown to PNG, a single capture bounded at 32768 px
- 要给程序读的数据:Markdown→HTML 或 Markdown→CSV / JSON,图片这一格交付的是版面For data a program reads: Markdown to HTML, CSV or JSON — this page delivers the layout
常见问题Questions people actually ask
我的图片为什么不见了?Where did my images go?
如果它们是以网络地址或相邻路径引用的,字节本来就不在 `.md` 文件里,而这条路完全离线:渲染前会剥掉这些引用,结果卡按张数写明「丢了几张」,被替换的位置是一个虚线方框,解不开的那种直接空着。要带图的成品,请把图片放进真能读到字节的位置,或者接受这一格交付的是纯排版。If they were referenced by network address or a sibling path, their bytes were never in the `.md` file, and this route is fully offline: the references are stripped before rendering, the result card states how many were lost, and a replaced spot is either a dashed box or left blank. Either put the images somewhere genuinely readable, or accept that this route delivers the typography.
会得到几张图,名字是什么?How many pictures, and what are they called?
张数由渲染后的文档高度按 A4 比例决定(一页一张),两页以上打包成 ZIP,里面按 `page-N.jpg` 编号。想要一张不分页的连续图,那是 Markdown→PNG 的形状。The count comes from the rendered height under the A4 ratio — one page per image — and two or more arrive in a ZIP with pictures named `page-N.jpg`. A single continuous image is what Markdown to PNG produces.
表格在图里会被渲染成什么样?How does my table appear in the image?
进图的是渲染结果:管道符表格经 marked 变成真正的 `<table>`,自带样式表给它 100% 宽、每格 1px 实线、表头浅底与偶数行条纹。这也意味着「好看」是这份样式表的好看——换一份 CSS 就是另一个样子,而产物本身不含可编辑的表格结构。The image carries the rendered result: a pipe table becomes a real `<table>` through marked, and the bundled stylesheet gives it full width, a 1px rule per cell, a tinted header and striped even rows. That also means the good looks belong to this stylesheet — different CSS, different picture — and the artifact holds no editable table structure.
不需要账号,也不需要联网:装好扩展后点图标,在新标签页里打开工作台,文件从磁盘直接选。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.