# 身高對比 — 一張能下載的並排圖 把身高打進去，把圖帶走。為了畫它，不會往外送任何東西。 > 把身高並排比出來。可以加男性、女性、男孩、女孩，也可以加物件——門、窗、白板、自動售貨機——用釐米或者英尺英寸都行，做好的圖能下載成 PNG 或 SVG。它是在你的瀏覽器裡畫的。 本頁是一個完全在你的瀏覽器裡執行的互動式工具，地址是 https://abox.tools/zh-TW/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-TW/guides/make-a-height-comparison-chart/): 把一串身高變成一張並排的圖：身高怎麼寫，給小孩挑哪個圖形，為什麼一件眼熟的東西比第三個人更管用，以及怎麼把圖匯出成 PNG 或 SVG。 ## 工具箱裡還有 - [圖片壓縮](https://abox.tools/zh-TW/compress-image/): 說個大小，剩下的它來算。 - [圖片縮放](https://abox.tools/zh-TW/resize-image/): 說個尺寸，拉個框，挑個格式。 - [HEIC 轉 JPG](https://abox.tools/zh-TW/heic-to-jpg/): iPhone 拍的照片，換成什麼都打得開的格式。 - [證件照製作](https://abox.tools/zh-TW/id-photo/): 選好國家，它就照那個國家的規定，一字不差地辦。 ## 常見問題 ### 我打進去的東西會被送到什麼地方嗎？ 不會。圖是這個頁面裡的 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** 則原樣放上去，保留它自己的顏色，所以那一行的顏色只用來寫名字。它放上去之前會在這裡重畫一遍，這既限制了它給圖表添的分量，也把檔案裡的後設資料留在了外面。透明的地方仍然透明，所以去背好的圖能乾淨地站在標尺上——照片則連背景一起來，最好先裁掉。 \ \ 兩個檔案哪裡都不去。這一點要緊兩回，因為你下載的圖是一個你可能發給別人的檔案。 ### 為什麼沒有幼兒或者嬰兒？ 因為沒人畫過一個並把它放進公有領域。維基共享資源上能用的自由兒童畫正好只有一個——就是那個女孩——NIH BioArt 相簿裡有那個男孩；學齡以下，搜尋一無所獲，而每一套完整的免費人形都是廁所指示牌那種圖示，各個年齡同一個形狀，那恰恰是這個工具整體要避開的錯誤。有一陣子這裡有個由頁面自己程式碼畫出來的幼兒，它是圖上唯一一個沒人畫過的人形：站在四個有人畫過的旁邊，這一點看得出來。比男孩或女孩還小的人，把其中一個設成真實身高就行——扛著這個比較的是標尺，而它是準的。 ### 一張圖能放多少人？ 十二個。這不是技術上的限制——畫三十個它也樂意——但過了一打，列就比上面寫的名字還窄，圖也就讀不成了。要是需要更多，把名字關掉能把寬度還給你，或者兩張圖會比一張說得更清楚。 ### 能在圖上放一件物件嗎？ 能——而且大多數進來時就帶著畫。選單裡有二十件可以起步，分成四組：門和窗，學校和辦公室（白板、辦公桌、檔案櫃、投影幕），街上的東西（自動售貨機、帶輪垃圾桶、籃球架、20 英尺的海運集裝箱），還有家裡的東西。其中十七件帶著一幅畫——有把手的門、冷凍室在上頭的冰箱、一看就是沙發的沙發——畫會按那一行的高度和寬度套進去，所以尺寸仍然由數字說了算，你蓋著改的數字也照樣算數。剩下三件是普通矩形，因為沒找到一幅既畫對了、比例又對的免費畫，而在一張講尺度的圖上，畫錯了還不如老老實實一個方塊。 \ \ 其中一些真的是標準，一些只是常見尺寸，頁面把這話說在明處。一件眼熟的東西，對一張圖的作用比再多幾個人都大：它把一次比較，變成對尺度的感覺。 ### 有狗或者貓的人形嗎？ 沒有，而且這是故意留的空缺，不是疏漏。兩個都做過——側面、站著、頭與肩同高，好讓畫的頂端就是旁邊寫的那個高度，因為所有品種標準都是那麼量動物的。做出來的效果不夠好，就沒發：一隻從側面看的四足動物，站在四個正面看的人旁邊，哪怕畫得好，讀起來也像出了錯。在那之前，用一個到動物肩高的矩形是誠實的。 ### 能用連結把圖分享出去嗎？ 從這裡不能，而且是故意的。提供這功能的工具，做法是把整份名單塞進地址，這就意味著每個名字和每個身高，都會落進這條連結經過的一切裡——聊天伺服器的日誌、郵件掃描器、某人的瀏覽記錄、一個去抓連結預覽的服務。把圖下載下來發那個：它說的是同一件事，卻不帶著名單走。 ### 免費嗎？做出來的圖能商用嗎？ 免費，沒有帳號也沒有水印，做出來的東西你可以放進報告、演示、廣告或者產品裡。本站有廣告，網站靠它維持。你在這裡做的圖，沒有一處是我們的，也什麼都不留存。 ### 標尺為什麼是十格一跳，不是一格一跳？ 因為間距是按這張圖能承得住多少條線來定的，而不是按一個固定數字。兩個大人的圖，每十釐米一條線；放上一個籃球架，線就挪到二十五，因為一張圖上九十條線是一片灰，不是標尺。用英尺英寸時，梯級是一、三、六、十二英寸，好讓線落在整英寸上，而不是落在旁邊。 ### 能把圖放到深色投影片上嗎？ 能。把背景設成它將要落在的那個顏色，標尺和文字就會在深淺之間切換來配合它——這是從那個顏色的亮度算出來的，不是猜的。然後如果你想讓圖本身透明，就勾上「完全不要背景」：決定墨色的還是你選的那個顏色，所以一張要去深藍投影片的透明圖，落上去照樣讀得清。 ### 斷網還能用嗎？ 能。頁面載入一次之後拔掉網線，它照樣工作。這也是證明沒有上傳的最簡單辦法：一個把你的名單送出去讓別人畫圖的工具，在你拔線的那一刻就停了。 ## 這條隱私承諾怎麼核實 - **一份人的名單，不是可以隨手交出去的小東西。** 大多數身高圖工具要你註冊，不要你註冊的那些，也還是有一臺伺服器看著你打的每個名字和每個數字。你在這裡打的，是你家裡有誰、每個人多高，而且名字旁邊那個人形往往還把孩子的年紀一併說了出來。這些一樣也不會被送去哪裡，因為這裡根本沒有可去的地方。 - **這裡不會去取任何東西。** `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`，那也是這裡唯一一個出錯會有後果的檔案。