# 身高对比 — 一张能下载的并排图 把身高打进去，把图带走。为了画它，不会往外送任何东西。 > 把身高并排比出来。可以加男性、女性、男孩、女孩，也可以加物件——门、窗、白板、自动售货机——用厘米或者英尺英寸都行，做好的图能下载成 PNG 或 SVG。它是在你的浏览器里画的。 这是一个浏览器交互工具，地址是 https://abox.tools/zh/compare-heights/。文件在运行该浏览器的设备上处理。主动分享和可选联网功能都在页面上说明。下文是它的文字说明；使用工具请打开该地址。 ## 你的名字、身高，以及它们凑成的那张图**在浏览器里处理**，无须上传处理。 一张身高图就是算术加一幅画：没有文件要送出去，也没有服务要去问——而这个页面唯一会收的文件，也就是你放到标尺上的那张图片，同样是在这里读的，哪儿都不去。男性、女性、男孩和女孩是随这个页面一起发出去的公有领域画作，而男孩和女孩画的是真孩子，不是缩小的大人——正是这一点，让一张全家的图不至于以一种谁也说不上来的方式显得不对。这里面的每一步，都发生在这个页面里那几百行你能读的 JavaScript 中。这里压根就没有任何网络功能，而这一点在这里格外要紧，因为你打进去的是一份人的名单，以及每个人有多高。 - ✗ 不上传 - ✗ 不注册 - ✗ 无水印 - ✓ 断网可用 - ✓ 开源 ## 怎么做一张身高对比图 1. **先把人都加进去，好不好看以后再说。** 一行就是一个人形、一个名字、一个身高和一种颜色。名字可以不填——两个没名字的剪影，上面标着身高，常常正是有人想要的那种图——如果顺序要紧，每行的箭头能把它往左往右挪。 2. **身高按你平时的写法打。** `173`、`1.73 m`、`5'8"`、`68 in` 和 `5 ft 8` 都能正确读出来。框下面那行会用两套单位显示它读成了什么，所以读错是在画出来之前就看得见，而不是印出来之后。一个光秃秃的数字，在公制图上是厘米，在英制图上是英寸；小于三的光秃秃的数字是米——没有人身高 1.73 厘米。 3. **挑跟这个人对得上的人形。** 孩子大约六个头高，大人是七个半，所以把孩子画成缩小的大人，会以一种说不上来但一眼看得出的方式显得不对。男孩和女孩画的是真孩子，不是缩小的大人，一张全家的图看着像一家人，多半就靠这个。而且每一行进来就带着一个身高，所以加一个人就画出一个人——直接盖着改就行。 4. **在图上放一件眼熟的东西。** 数字是抽象的，一道门不是。加一件大家都知道多大的东西——一扇门、一扇窗、教室里的白板、一台自动售货机——就是把一张只说出两个身高的图，变成一张让人看见这两个身高的图。菜单里有二十件，分了组，每一件进来都是普通的一行，你可以把自己的数字盖上去。物件除了高度还有宽度，所以一扇门是 203 乘 81，不是一根条。 5. **或者把你自己的图放上去。** **自己的图片**会从你的机器上取一个文件，按你给的高度把它放到标尺上——图讲的不是人，而是一件产品、一辆车或者一栋建筑时，就用它。SVG 会像其他任何图形一样，用那一行自己的颜色画出来；照片或 PNG 则原样放上去。两种都保留自己的比例，两种都是在这里读的，不往任何地方送。 6. **把标尺调成你读者习惯的单位。** 在厘米和英尺之间切换，是把框里的内容重写一遍，而不是重新解释一遍，所以图本身不动，动的只是记法。要是这张图给两拨人看，每个人形上方写的身高用图表的单位，而每个框下面那行两套都有。 7. **要粘就用 PNG，要印就用 SVG。** PNG 是一张按你设定的像素高度出的图，聊天窗口、文档或者幻灯片要的就是它。SVG 是把图表存成指令，所以放到多大都印得清楚，之后任何能打开矢量的东西都还能给它换颜色。 ## 说得更细的版本 [怎么做一张身高对比图](https://abox.tools/zh/guides/make-a-height-comparison-chart/): 把一串身高变成一张并排的图：身高怎么写，给小孩挑哪个图形，为什么一件眼熟的东西比第三个人更管用，以及怎么把图导出成 PNG 或 SVG。 ## 工具箱里还有 - [商家资料预览](https://abox.tools/zh/business-profile-preview/): 把内容打进去，它就变成 Google 会画的那张卡片。为了画它，不会往外送任何东西。 - [图片压缩](https://abox.tools/zh/compress-image/): 说个大小，剩下的它来算。 - [图片缩放](https://abox.tools/zh/resize-image/): 说个尺寸，拉个框，挑个格式。 - [HEIC 转 JPG](https://abox.tools/zh/heic-to-jpg/): iPhone 拍的照片，换成什么都打得开的格式。 ## 常见问题 ### 我打进去的东西会被送到什么地方吗？ 不会。图是这个页面里的 JavaScript 在你自己的设备上画的，而这个工具压根就没有任何网络功能——从不取任何东西，也从不发任何东西。页面的 `Content-Security-Policy` 里写着它允许联系的每一个地址，没有一个属于本站。这话在这里值得挑明，因为输入的是一份人名和各自身高的清单，比本站处理的绝大多数东西都更私人。 ### 图能下载吗？ 能，PNG 或者 SVG 都行，没有水印，也不用账号。PNG 按你设定的像素高度画出来，是往文档、幻灯片或聊天里粘的那一个。SVG 是把图表存成指令而不是像素：放到多大都印得清楚，以后还能在任何矢量编辑器里打开重新上色。两个都是从屏幕上那份同样的标记做出来的，所以哪个都不会跟预览对不上。 ### 身高该怎么写——厘米还是英尺？ 都行，哪一行都行，你平时怎么写就怎么写。`173`、`173 cm`、`1.73 m`、`5'8"`、`5 ft 8 in` 和 `68 in` 全都读得懂，框下面那行会用两套单位显示它读成了什么。一个光秃秃的数字，图是公制时算厘米，是英制时算英寸；小于三的光秃秃的数字按米算，因为 1.73 厘米不是谁会打进去的身高。 ### 孩子为什么看着不像缩小的大人？ 因为孩子本来就不是。身体比例随年龄变：两岁孩子大概四个半头高，八岁六个，大人七个半——所以头差不多占小孩子的四分之一，占大人的八分之一。这里的男孩和女孩画的是真孩子，不是把一个剪影缩小。一张全家的图看着像一家人而不像四个不同尺寸的大人，原因就在这儿。 ### 这些人形是哪儿来的？ 四个都是别人的画，全都在公有领域：男性出自 pitr，女性出自 Madeleine Price Ball，女孩出自 OpenClipart-Vectors，男孩出自 Ryan Kissinger 为 NIH BioArt 图库所作。每个文件都按发布时的样子放在 `vendor/` 里随页面一起发出去，所以你可以拿去跟原件对。公有领域什么都不要，而这正是关键：画最后会进到你下载的那张图里，一份要求署名的许可，就会把那份要求粘到你的图上。 ### 能把我自己的图片放到图上吗？ 能——**自己的图片**接受一张画或者一张照片，按你打的高度把它放到标尺上：标志、平面图、机器零件、汽车都行，那件东西本身的照片也行。比例是它自己的，所以没有宽度要填。 \ \ **SVG** 是用一种实色画的，就是那一行设定的颜色，因为图的其余部分也是这样——所以用细轮廓线画的、不是实心形状的图，出来会是一团墨块，这种图用这个工具就不合适。只有*形状*会留下来：文件会用路径、矩形和圆从头重搭一遍，任何够得着网络的东西——外链图片、样式表、字体、脚本——都被留下。 \ \ **照片或 PNG** 则原样放上去，保留它自己的颜色，所以那一行的颜色只用来写名字。它放上去之前会在这里重画一遍，这既限制了它给图表添的分量，也把文件里的元数据留在了外面。透明的地方仍然透明，所以抠好的图能干净地站在标尺上——照片则连背景一起来，最好先裁掉。 \ \ 两个文件哪儿都不去。这一点要紧两回，因为你下载的图是一个你可能发给别人的文件。 ### 为什么没有幼儿或者婴儿？ 我们没有找到符合本工具公有领域许可和绘图要求的婴幼儿素材。内置儿童图形是一个男孩和一个女孩，并非儿童素材的完整目录。比较更年幼的孩子时，可将图形设为实测身高，或添加合适的自有图片；标尺承载的是测量值。 ### 一张图能放多少人？ 十二个。这不是技术上的限制——画三十个它也乐意——但过了一打，列就比上面写的名字还窄，图也就读不成了。要是需要更多，把名字关掉能把宽度还给你，或者两张图会比一张说得更清楚。 ### 能在图上放一件物件吗？ 能——而且大多数进来时就带着画。菜单里有二十件可以起步，分成四组：门和窗，学校和办公室（白板、办公桌、文件柜、投影幕），街上的东西（自动售货机、带轮垃圾桶、篮球架、20 英尺的海运集装箱），还有家里的东西。其中十七件带着一幅画——有把手的门、冷冻室在上头的冰箱、一看就是沙发的沙发——画会按那一行的高度和宽度套进去，所以尺寸仍然由数字说了算，你盖着改的数字也照样算数。剩下三件是普通矩形，因为没找到一幅既画对了、比例又对的免费画，而在一张讲尺度的图上，画错了还不如老老实实一个方块。 \ \ 其中一些真的是标准，一些只是常见尺寸，页面把这话说在明处。一件眼熟的东西，对一张图的作用比再多几个人都大：它把一次比较，变成对尺度的感觉。 ### 有狗或者猫的人形吗？ 没有，而且这是故意留的空缺，不是疏漏。两个都做过——侧面、站着、头与肩同高，好让画的顶端就是旁边写的那个高度，因为所有品种标准都是那么量动物的。做出来的效果不够好，就没发：一只从侧面看的四足动物，站在四个正面看的人旁边，哪怕画得好，读起来也像出了错。在那之前，用一个到动物肩高的矩形是诚实的。 ### 能用链接把图分享出去吗？ 从这里不能，而且是故意的。提供这功能的工具，做法是把整份名单塞进地址，这就意味着每个名字和每个身高，都会落进这条链接经过的一切里——聊天服务器的日志、邮件扫描器、某人的浏览记录、一个去抓链接预览的服务。把图下载下来发那个：它说的是同一件事，却不带着名单走。 ### 免费吗？做出来的图能商用吗？ 免费，没有账号也没有水印，做出来的东西你可以放进报告、演示、广告或者产品里。本站有广告，站点靠它维持。你在这里做的图，没有一处是我们的，也什么都不留存。 ### 标尺为什么是十格一跳，不是一格一跳？ 因为间距是按这张图能承得住多少条线来定的，而不是按一个固定数字。两个大人的图，每十厘米一条线；放上一个篮球架，线就挪到二十五，因为一张图上九十条线是一片灰，不是标尺。用英尺英寸时，梯级是一、三、六、十二英寸，好让线落在整英寸上，而不是落在旁边。 ### 能把图放到深色幻灯片上吗？ 能。把背景设成它将要落在的那个颜色，标尺和文字就会在深浅之间切换来配合它——这是从那个颜色的亮度算出来的，不是猜的。然后如果你想让图本身透明，就勾上“完全不要背景”：决定墨色的还是你选的那个颜色，所以一张要去深蓝幻灯片的透明图，落上去照样读得清。 ### 断网还能用吗？ 能。页面加载一次之后拔掉网线，它照样工作。这也是证明没有上传的最简单办法：一个把你的名单送出去让别人画图的工具，在你拔线的那一刻就停了。 ## 这条隐私承诺怎么核实 - **处理在这个浏览器里完成。** 本工具在浏览器里处理输入和结果，处理代码不把它们上传去处理。Content-Security-Policy 限制可用资源和连接目的地，但已允许的主机仍可接收请求。策略不检查载荷，不能单独证明什么都没有发出。请把具体操作的请求与源码核对，或断网完成该本地操作。 - **这里不会去取任何东西。** `src/` 里哪儿都没有 `fetch`，没有 `XMLHttpRequest`，也没有 `sendBeacon`。Content-Security-Policy 里写着这个页面允许联系的每一个地址，没有一个属于本站。 - **两次来访之间，也什么都不记。** 这张图只活在页面里，别处没有。关掉标签页，名单就没了：没有账号存着它，没有 cookie 带着它，这个浏览器的存储里也什么都没写——这也是为什么你想留下的图，就是你下载下来的那张。 - **链接不会把图带走。** 好几个同类工具会把整份名单塞进地址栏，好让它能分享，而这就把每个名字和每个身高，变成了链接经过的一切都会记下来的东西——聊天服务器、邮件扫描器、某人的浏览记录。这个页面的地址，在你打字的时候从不改变。 - **PNG 是从屏幕上那份 SVG 做出来的。** 下载的东西不是第二次渲染，不会跟预览对不上。同一份标记交给浏览器，画到画布上，而这也是为什么拔了网线照样能做：里面没有字体要取，也没有图片要加载。 - **你加进来的图片在这里读，而且从不外发。** 文件从不离开这个页面——它用浏览器自带的 `FileReader` 读进来，解析成一份什么都不执行的死文档。画出来的并不是那个文件：`src/import-svg.js` 会照着一份只允许形状和几何的白名单，重新搭出一张新的图，于是脚本、样式表、字体、外链图片，以及指向别的文档的引用，都会被留在原地，而不是跟着过来。这一点要紧两回，因为你下载的图是一个会发给别人的文件：任何能活下来的东西，都会变成几天之后，别人的浏览器从这个页面写出来的东西里，去请求一台陌生的服务器。 照片或 PNG 不是程序，也没有什么可重建的：浏览器自带的解码器读它，上图之前先在这里重画到一块画布上。正是这一遍重画，把文件里的元数据留在了外面——相机、地点、色彩配置，不管里面原来有什么——因为这些没有一样能穿过画布。最后进到图里的，是这个页面自己编码出来的一张图片，写进去的是数据而不是地址，所以这张图仍然不指向任何地方。 - **画就在这里，不是去取来的。** 四个人形都是公有领域的画作，跟页面其余部分一样从这个源提供——没有图标字体，没有 CDN，也没有在你打字时从别人服务器上拽下来的雪碧图。断网还能画出图，这也是原因之一。 - **Google 加载了什么，又没拿到什么。** 广告和统计脚本来自 Google，捐赠按钮来自 Buy Me a Coffee。它们谁也没拿到一个名字或者一个身高。把你的名单变成一幅图的每一行代码，都从这个源提供，也都列在仓库里。 - **断网可用。** 拔掉网线，这个工具一点变化都没有，因为它里面本来就没有联网这一步。这是最简单的证明。 **你可以自己核对。**上面这些不用你信。这个页面是仓库里的模板和配置生成出来的，构建脚本你能读，也能自己跑一遍，跑出来的结果就提交在 `dist` 分支上。拿实际发给你的内容，跟你自己从源码构建出来的结果对一遍就知道了： https://github.com/A-Box-of-Tools/website 最值得先读的几个文件：`config/site.toml` 里是 Content-Security-Policy，四个人形和它们的画从哪儿来，在 `src/traced.js` 和 `vendor/`；菜单是照着哪份清单搭的，在 `src/figures.js`；打进去的身高怎么变成数字、标尺怎么标注，在 `src/units.js`；排版在 `src/chart.js`；两个下载在 `src/save.js`——那就是屏幕上的 SVG，以及同一份 SVG 画到画布上——而加进来的 SVG 是照着哪份白名单重建的，在 `src/import-svg.js`，那也是这里唯一一个出错会有后果的文件。