离线 · 无上传 · 浏览器本地完成Offline · no uploads · runs in the browser
JPG 转 HTML——离线、字节原样内嵌、不上传JPG to HTML offline — the bytes travel unchanged
这条路只有一步,而且刻意做得很薄:`jpg>html` 把文件的**原始字节**用 `FileReader.readAsDataURL` 编成 data URI,写进一个 `<img src>`,再把这张图包进一份自带样式表的 HTML——**中间没有任何解码或重编码**,不像图片转图片那几路要先上画布再压一次。所以像素与源文件逐字节相同;体积是「每三个字节写成四个字符」再加一层约 2.6 KB 的外壳(`<style>` 里那份文档 CSS 与标签;文件名在 `<title>`、`alt`、`title` 各出现一次,所以它随名字长度略有增减),大图因此趋近 4/3(界面上 5 MB 的照片产出约 6.7 MB 的 HTML),小图则几乎全是这层外壳(本身就有 2.6 KB)。`alt` 与 `title` 都取**文件名的主干**(去掉扩展名,没有可用名字时退到 `converted`),并且按属性位置做了转义——这是这条唯一能给出的描述:它不读图里的内容,也不猜图里画了什么。文档 CSS 让图居中、`max-width: 100%`、`height: auto`,所以一张很宽的图最多显示到这份文档的版心(实测 1400 px 窗口下约 800 px:`body` 是 content-box 的 `max-width: 800px`,内边距不占这 800),窗口更窄时再跟着缩——两种缩放都不改动文件里的像素。这条路的用处是「把图交给一个只吃网页的地方」:单文件归档、图文一起存进笔记,或者作为 Markdown 与 Word 那两条链的中间形状(本扩展的图转 Markdown 正是先走这一步)。它也**不外发任何东西**:图就在文件里,打开这份 HTML 不取任何远程资源;SVG 那条路同样在写出前剥掉远程引用,所以两条都不会在你双击打开时发起请求。扩展本身也只有 storage 权限,转换全程离线。This route is one step, and deliberately thin: `jpg>html` takes the file’s **raw bytes**, base64-encodes them through `FileReader.readAsDataURL` into a data URI, puts them in an `<img src>` and wraps that in a document with the bundled stylesheet — **no decode and no re-encode anywhere**, unlike the image-to-image routes, which must go through a canvas and compress again. So the pixels are byte-identical to your file, and the size is four characters per three bytes plus a wrapper of about 2.6 KB that shifts with the length of your file name (the name appears three times: `<title>`, `alt` and `title`) (the document CSS in `<style>` and the markup): a large photo converges on 4/3 — the 5 MB the interface shows comes out as roughly 6.7 MB of HTML — while a small one is almost all wrapper. `alt` and `title` both carry **the basename of your file** (extension dropped, falling back to `converted` when there is no usable name), escaped for attribute position — that is the only description this route can offer, because it never reads what is in the picture and never guesses at its contents. The document CSS centres the image with `max-width: 100%` and `height: auto`, so a very wide picture displays no wider than this document’s measure (measured at a 1400 px window: about 800 px, because `body` is content-box with `max-width: 800px` and its padding sits outside that 800) and keeps shrinking below that in a narrow window; neither kind of scaling changes a pixel in the file. What this is for: handing a picture to something that only accepts a web page — a single-file archive, a note that keeps its image next to its text, or the middle shape of the Markdown and Word chains (this extension’s image-to-Markdown goes through exactly this step). And it **sends nothing out**: the picture lives in the file, so opening the HTML fetches no remote resource, and the SVG route strips remote references on the way out too, so neither one makes a request when you double-click it. The extension itself holds only the storage permission, and the conversion never touches the network.
这条链路怎么走How the route runs
JPEGJPEG HTMLHTML
共 1 步,由扩展的路径搜索自动选出,中间产物不落盘。1 step, chosen by the extension's own path search; intermediate results never touch the disk.
会保留什么What carries over
- 像素逐字节不变:不解码、不上画布、不再压一次,所以没有第二代损失Byte-identical pixels: no decode, no canvas, no second compression, so there is no generation loss
- `alt` 与 `title` 取文件名的主干(去扩展名),并做了属性转义——不会把名字写成标记`alt` and `title` carry the file’s basename with the extension dropped, escaped for attribute position so a name cannot become markup
- 自包含:图就在文件里,打开这份 HTML 不取任何远程资源Self-contained: the picture is in the file, and opening it fetches no remote resource
- 显示缩放不动数据:CSS 只决定它在页面上占多宽,文件里的像素一个都不变Display scaling never touches data: CSS decides how wide it looks on the page, not what the bytes are
- 一批最多 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
- 不 OCR,也不生成任何关于内容的文字:产物里唯一的字符串来自你的文件名No OCR and no invented description: the only string in the output comes from your file name
- 体积只增不减:每三个字节写成四个字符,再加约 2.6 KB 外壳(界面上 5 MB 的照片约产出 6.7 MB HTML),所以这一路不是「压缩」The file only grows: four characters per three bytes plus about 2.6 KB of wrapper, so the 5 MB the interface shows becomes roughly 6.7 MB of HTML — this is not a compression route
- 只包一张图:多张图请一个文件一次,或先做一张拼版(本扩展不提供拼图功能)One picture per file: for several, convert one at a time — this extension has no collage or tile feature
- JPG 本身是哪种编码、有没有被裁切,这一层不改也不查:它做的是搬运而不是处理Whatever encoding or cropping the JPEG already had is neither examined nor changed: this route carries, it does not process
- 邮件里不保显示:网页端邮件客户端(Gmail 便是)会剥掉 `data:` 图片,能不能显示由收件端决定——要进邮件正文请用外链图片或邮件自己的附件No guarantee in email: webmail clients — Gmail among them — strip `data:` images and the recipient decides, so use an external picture or the mail attachment itself
- 不产生可复制的图片对象:想在别的文档里用这张图,请直接拿原文件或走图片转图片那几路It yields no copyable image object: take the original file, or an image-to-image route, when a document needs the picture itself
实操提示Working with it
- 要 Markdown 里的图片:JPG→Markdown 就是这条再加一步序列化For an image in Markdown: JPG to Markdown is this step plus a serialisation
- 要 Word 文档里的图片:JPG→Word 第一步同为 `jpg>html`,进 Word 那一步会把这条 data URI 收进包里独立的图片部件,`.docx` 内不再留 data URIFor a picture in a Word file: JPG to Word shares this first step, and the `html>docx` step lifts that data URI into its own image part, so no data URI is left in the `.docx`
- 要真正换格式(比如转 WebP / PNG):那需要重编码,请走图片转图片那几页To actually change format (to WebP or PNG): that needs re-encoding, so take the image-to-image pages
常见问题Questions people actually ask
这跟我手动把图片拖进网页有什么区别?How is this different from dropping the image into a web page myself?
结果形状一样,差别在它顺手做完三件小事:文件名变成 `alt` 与 `title`(并按属性转义)、文档带着居中与自适应宽度的样式、以及不需要你写任何 HTML。产物是一份能直接双击打开的自包含文件。The shape is the same; what this adds is three small things done for you: the file name becomes `alt` and `title` (escaped for attribute position), the document ships centreing and width-fit styling, and you write no markup. The result is a self-contained file you can open directly.
图里的文字会被识别出来吗?Will the text inside the picture be recognised?
不会。这条路连像素都不读——它只把文件字节编成 data URI。任何「图片转文字」的结果都需要 OCR,而本扩展不带着语言包与识别模型,也不联网调用别的服务,所以它交付的是图片本身,外加你的文件名。No. This route never looks at pixels: it encodes the file’s bytes as a data URI. Anything resembling text needs OCR, and the extension ships no language packs or recognition models and calls nothing over the network, so it delivers the picture plus your file name.
为什么 HTML 比原图大那么多?Why is the HTML bigger than my image?
base64 每三个字节要写成四个字符,这是编码形态的固定开销;另加约 2.6 KB 的文档外壳(它随文件名长度略有增减)(`<style>` 里那份 CSS 与标签)。图越大越接近 4/3,图越小越被外壳主导。想变小请走图片转图片那几路做真实重编码,而不是这一路。base64 writes every three bytes as four characters — the fixed cost of the encoding — plus a document wrapper of about 2.6 KB, which moves a little with the length of your file name (the CSS in `<style>` and the markup). The bigger the picture, the closer it gets to 4/3; the smaller, the more the wrapper dominates. To go smaller, take an image-to-image route and re-encode for real; this one is not a compressor.
不需要账号,也不需要联网:装好扩展后点图标,在新标签页里打开工作台,文件从磁盘直接选。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