這個頁面的程式碼沒跑起來。

直接從資料夾裡開啟 index.html,瀏覽器會攔下 JavaScript 模組,於是你選好誰上這張圖之後,頁面不會有任何反應。改用 http 把這個資料夾提供出去:

powershell -ExecutionPolicy Bypass -File serve.ps1

然後開啟 http://localhost:8080/。

身高對比 — 一張能下載的並排圖

把身高打進去,把圖帶走。為了畫它,不會往外送任何東西。

語言: 繁體中文
檢視原始碼
你的名字、身高,以及它們湊成的那張圖不會上傳。這裡根本沒有伺服器。

一張身高圖就是算術加一幅畫:沒有檔案要送出去,也沒有服務要去問——而這個頁面唯一會收的檔案,也就是你放到標尺上的那張圖片,同樣是在這裡讀的,哪裡都不去。男性、女性、男孩和女孩是隨這個頁面一起發出去的公有領域畫作,而男孩和女孩畫的是真孩子,不是縮小的大人——正是這一點,讓一張全家的圖不至於以一種誰也說不上來的方式顯得不對。這裡面的每一步,都發生在這個頁面裡那幾百行你能讀的 JavaScript 中。這裡壓根就沒有任何網路功能,而這一點在這裡格外要緊,因為你打進去的是一份人的名單,以及每個人有多高。

即時檢查: 檢查中…

離線: 檢查中…

不用信我們說的。開啟開發者工具,盯著「網路」面板,打一個名字和一個身高。沒有哪個請求帶走它們中的一個字元。嫌麻煩就直接拔掉網線,照樣把圖做出來。

1 說清楚你在比誰

一個名字、一個身高,還有畫成哪種圖形。每一行一開始就帶著一個身高,你可以直接蓋著改。身高按你平時的寫法寫就行——173、1.73 m、5'8"、68 in 都讀得懂——每個框下面那行會顯示它讀成了什麼;框是空的,或者身高讀不出來,它就用紅字說出來。不會有什麼被悄悄猜掉。

這裡的從上到下,就是圖上的從左到右。要挪動一行,抓住它左邊的把手拖,或者用箭頭,那在鍵盤上做的是同一件事。不管哪種,只要圖表原本在按身高排序,它都會回到你自己的順序。

SVG 能把任何一張圖放到標尺上——一個標誌、一張平面圖、一個機器零件都行。檔案在這個頁面裡讀,哪裡都不去。留下的只有裡面的形狀:它以一種實色進來,顏色由你逐行來挑;而任何夠得著網路的東西——外鏈圖片、樣式表、字型、指令碼——都會被留在原地,不會跟著進到一張你可能發給別人的圖裡。用細線畫的、不是實心形狀的圖,出來會是一團實心的墨塊,這也是這個工具唯一不合適的場合。

照片或 PNG 則原樣放上去,保留它自己的顏色,所以那一行的顏色只用來寫名字。它同樣在這個頁面裡讀,放上去之前會重畫一遍——這既限制了它給圖表添的分量,也把檔案裡的附帶資訊留在了外面。透明的地方仍然透明,所以去背好的圖能乾淨地站在標尺上;照片則連背景一起來,最好先裁掉。

這裡大多數是畫出來的,不是一個素方塊——帶把手的門、上面帶冷凍室的冰箱、一看就是沙發的沙發。畫會按這一行的兩個數字來套,所以決定形狀的還是數字:把你自己的蓋上去,圖就跟著變。有三個沒有畫,因為沒找到既能自由使用、比例又對的:籃球架、海運集裝箱和廚房檯面,還是以前每件物件都用的那個矩形。

裡頭有幾個是真的固定:20 英尺的海運集裝箱按定義就是 259 cm 高,籃球框在 305,美國的室內門是 203 乘 81。其餘是常見尺寸而不是標準——門、窗和檯面各國不同、各家也不同。每一個進來都是一行普通的行,量一下你自己的,把真數字蓋上去。

2 拿走

要貼進文件或者聊天視窗的是 PNG。要留著的是 SVG:它把圖表存成指令而不是畫素,所以放到多大都印得清楚,以後任何能開啟向量的東西都能給它換顏色。

畫出標尺 橫穿圖表的那些線,還有兩邊的數字。沒有它們,這張圖仍然能正確地比出兩個人誰高,但它不再說誰有多高。

在每個圖形上方寫名字和身高 關掉之後,圖表就是標尺上的一排剪影——如果名字反正要寫在你貼上過去的那個東西裡,你要的就是這樣。

完全不要背景 透明,方便放到本來就有顏色的投影片上。標尺和文字會按上面選的顏色畫成深色或淺色,所以就算背景本身關掉了,也把那個顏色設成圖差不多要落在的顏色。

那是繪圖區的高度,所以成品會稍微高一點:名字在它上面。寬度由有幾個圖形、每個的標籤有多寬決定。圖下面那行會說最後是多少。

它長什麼樣

以 Markdown 檢視

怎麼做一張身高對比圖

  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 是把圖表存成指令,所以放到多大都印得清楚,之後任何能開啟向量的東西都還能給它換顏色。

說得更細的版本

怎麼做一張身高對比圖 把一串身高變成一張並排的圖:身高怎麼寫,給小孩挑哪個圖形,為什麼一件眼熟的東西比第三個人更管用,以及怎麼把圖匯出成 PNG 或 SVG。

常見問題

我打進去的東西會被送到什麼地方嗎?

不會。圖是這個頁面裡的 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 英尺的海運集裝箱),還有家裡的東西。其中十七件帶著一幅畫——有把手的門、冷凍室在上頭的冰箱、一看就是沙發的沙發——畫會按那一行的高度和寬度套進去,所以尺寸仍然由數字說了算,你蓋著改的數字也照樣算數。剩下三件是普通矩形,因為沒找到一幅既畫對了、比例又對的免費畫,而在一張講尺度的圖上,畫錯了還不如老老實實一個方塊。

其中一些真的是標準,一些只是常見尺寸,頁面把這話說在明處。一件眼熟的東西,對一張圖的作用比再多幾個人都大:它把一次比較,變成對尺度的感覺。

有狗或者貓的人形嗎?

沒有,而且這是故意留的空缺,不是疏漏。兩個都做過——側面、站著、頭與肩同高,好讓畫的頂端就是旁邊寫的那個高度,因為所有品種標準都是那麼量動物的。做出來的效果不夠好,就沒發:一隻從側面看的四足動物,站在四個正面看的人旁邊,哪怕畫得好,讀起來也像出了錯。在那之前,用一個到動物肩高的矩形是誠實的。

能用連結把圖分享出去嗎?

從這裡不能,而且是故意的。提供這功能的工具,做法是把整份名單塞進地址,這就意味著每個名字和每個身高,都會落進這條連結經過的一切裡——聊天伺服器的日誌、郵件掃描器、某人的瀏覽記錄、一個去抓連結預覽的服務。把圖下載下來發那個:它說的是同一件事,卻不帶著名單走。

免費嗎?做出來的圖能商用嗎?

免費,沒有帳號也沒有水印,做出來的東西你可以放進報告、演示、廣告或者產品裡。本站有廣告,網站靠它維持。你在這裡做的圖,沒有一處是我們的,也什麼都不留存。

標尺為什麼是十格一跳,不是一格一跳?

因為間距是按這張圖能承得住多少條線來定的,而不是按一個固定數字。兩個大人的圖,每十釐米一條線;放上一個籃球架,線就挪到二十五,因為一張圖上九十條線是一片灰,不是標尺。用英尺英寸時,梯級是一、三、六、十二英寸,好讓線落在整英寸上,而不是落在旁邊。

能把圖放到深色投影片上嗎?

能。把背景設成它將要落在的那個顏色,標尺和文字就會在深淺之間切換來配合它——這是從那個顏色的亮度算出來的,不是猜的。然後如果你想讓圖本身透明,就勾上「完全不要背景」:決定墨色的還是你選的那個顏色,所以一張要去深藍投影片的透明圖,落上去照樣讀得清。

斷網還能用嗎?

能。頁面載入一次之後拔掉網線,它照樣工作。這也是證明沒有上傳的最簡單辦法:一個把你的名單送出去讓別人畫圖的工具,在你拔線的那一刻就停了。