這個前端寫的免費 Web 版 PS，讓他三十歲前財務自由

在 IT 產業的上古時代，流傳着許多獨行俠程序員們徒手寫出操做系統、編程語言、瀏覽器等高難度軟件的傳說。隨着行業的成熟，這些故事大多已經塵埃落定。但今天，咱們有幸見證了一個正在進行中的年輕故事。這個故事的主人公，讓世界上數以百萬的人，用上了昂貴 Photoshop 軟件的免費替代品。

家住捷克的伊萬·庫茨基爾 (Ivan Kutskir) 是個 90 後自由職業程序員。雖然伊萬曆來沒有公司的正式工做，但這不是由於他太菜了，而是由於他太強了：他就讀於捷克最好的大學。自學生時代起，他就靠着本身的編程天賦掙零花錢養活本身。他每個月只需工做大約 20 小時，就能賺夠一個月 300 美圓的生活費——這大體已經至關於國內不加班月薪三萬的水平。這樣的自由生活給了他極大的空間作本身喜歡的事。在這期間，他寫了許多試驗性的我的項目，從 Flash 小遊戲到 3D 模型渲染工具等等不一而足。這之中一個名叫 Photopea 的圖片編輯器項目，讓今天的他過上了每個月被動收入上萬美圓的「財務自由」生活。

咱們都知道，美國 Adobe 銷售的 Photoshop，是圖片編輯領域公認最爲強大的軟件之一。這個龐然大物功能當然強大，但 Adobe 的壟斷地位使它對於普通用戶並不友好：一份正版的 Photoshop CC 軟件國內售價超過 3000 元，對電腦硬件配置有着很高的要求。而且，它的 PSD 格式仍是專有的，通常只能用 PS 打開編輯。因而，伊萬在瀏覽器裏折騰各類 3D 文件格式解析器之餘，有了個大膽的想法：咱們能在網頁裏打開 PSD 文件嗎？

想法當然大膽，但稍有經驗的程序員均可以看出，這個點子絕對比一開始就喊着「我要從新發明一個 Photoshop」要切實可行得多。伊萬最先的規劃是這樣的：

• 先作一個簡單的 PSD 格式解析器，這以他的經驗來講並不難。
• 再添加一些簡單的 UI 界面，來展現圖層列表和最終的預覽效果。
• 最後支持幾個簡單的功能，好比移動圖層、隱藏圖層、導出 JPG 圖片等等。

這麼點需求顯然難不倒伊萬。在 2013 年，伊萬作出了第一個版本，這就是 Photopea 的起點了：

伊萬在把這個版本發佈試用以後，得到了出乎意料的好反響。因而，他決定持續維護這個項目，解決用戶的需求，這一維護就作到了今天。一晃六年過去了，如今的 Photopea 是怎樣的呢？

這是如今的 Photopea。你能夠看到，最先左側寥寥無幾的工具欄現在已經被填滿了，濾鏡、蒙版、鋼筆、文字、魔棒、曲線等功能更是包羅萬象。除了徹底支持 PSD 文件和 PNG / JPG / RAW / SVG 等圖像格式外，它甚至還能打開編輯 UI 設計師耳熟能詳的 Sketch 文件。這個強大的做品，獲得了全世界用戶的普遍承認。它到底有多受歡迎呢？舉幾個數據吧：

• Photopea 的用戶量每半年就會翻倍。如今它的每個月訪問量已經達到了 280 萬次，天天用戶花費 5500 個小時使用它。
• 人們天天搜索上萬次 「photopea」。在 Google 搜索 「online PS」 和 「online photoshop」 關鍵詞的時候，Photopea 都排在第一名，甚至超過了 Adobe 本身的 Flash 版本。
• 伊萬在國外的 Reddit 網站上和網友互動介紹 Photopea 的「你問我答」活動，得到了四萬多個贊同和超過 2000 條評論。
• 全世界的志願者無償地將 Photopea 翻譯成了 35 種不一樣的語言。其中，筆者也貢獻了若干中文翻譯 :)

別覺得 Photopea 只靠抄抄 PS 的樣子就能這麼火爆。這樣的圖片編輯器，實際上是個很是挑戰 Web 技術極限的產品。它的界面之下，隱藏了許多伊萬的獨門武功，許多技術指標迄今仍然獨步天下。舉幾個容易理解的例子：

• 圖像處理其實很是耗資源。例如一份尺寸 4000x4000 帶十個圖層的文檔，其內存佔用就是單張 1000x1000 圖片的 160 倍，解壓縮後會佔用 640MB 內存。若是用每秒 60 幀的頻率更新，就意味着每秒要在網頁中處理 38GB 的圖像數據！這是對普通程序員很是罕見的挑戰。Photopea 使用了瀏覽器底層的硬件加速技術，打開這一量級的文檔時也能保證基本的可用性。
• 對普通網站來講，瀏覽器是很是穩定的。但對於 Photopea 這樣變態的應用，許多極端情形都能讓瀏覽器級別的互聯網基礎設施暴露出問題。截至今天，Photopea 已經找到了 Chrome 的約 50 個 bug，以及 Firefox 的約 30 個 bug。到如今，伊萬甚至已經能夠繞過瀏覽器標準的 bug 反饋流程，直接寫郵件找 Chrome 團隊熟悉的開發者交流，幫助他們改進。某種程度上，Photopea 改善了瀏覽器的穩定性。
• 如今的 Web 應用正在變得日趨膨脹。打開淘寶、網易等網站的首頁時，消耗的流量幾乎不可能低於 2MB。那麼像 Photopea 這樣功能強大得多的應用，它的體積多大呢？爲了追求極致，伊萬幾乎徹底不使用第三方代碼庫，並本身實現了代碼的壓縮算法，最終整個應用只會消耗你 1.4MB 的流量。
• 幾乎你能看到的每一個知名網站，都有至關高昂的服務器運維成本。谷歌有幾十萬臺服務器，一年的成本是天文數字。猜猜 Photopea 一年的服務器成本有多高？20000 美圓？2000 美圓？答案是——20 美圓。因爲 Photopea 堅持只使用瀏覽器自身的能力，所以它的運維成本幾乎爲零，也很好地保護了用戶隱私。

如今的 Photopea 已經徹底是個成熟的商業級產品了。那麼，Photopea 的背後也有一支強大的團隊在維護它嗎？伊萬的故事裏最爲難以想象的一點，在於即使到了今天，全部 Photopea 的工做，包括開發新功能、修復 bug、聽取用戶反饋到發佈官方博客，仍然只由他本身完成！能夠說，他一我的花了幾年，就寫出了 Adobe Photoshop 一大支精英團隊，三十多年來積累出的那些最經常使用的功能。直到如今，他還在會按期在 Photopea 官方博客上發佈更新：

光是單槍匹馬地開發運營 Photopea，就已經夠難以想象了。不只如此，伊萬還開源了很多爲了 Photopea 自研的技術，包括字體解析、PNG 圖片編解碼和 ZIP 壓縮算法等等。因爲工做須要，一樣身爲程序員的筆者，也使用並閱讀過伊萬編寫的代碼。他的代碼是什麼風格的呢？在筆者我的的印象裏，出身烏克蘭的伊萬，寫的代碼體現着一種蘇式的工業美學——既沒有精緻的設計模式，也沒有應用流行的新式語法，更不講究換行縮進等優雅的排版，可代碼自己就是簡單明瞭、一步到位、性能優良且十分耐用。這些開源代碼的許可協議也十分寬鬆，在 GitHub 上得到了上千個 Star。

看到這裏，咱們對伊萬的技術水平應該不用再贅述了吧。不過相信一些同窗確定會問，像他這樣開發徹底免費的軟件，還要開源義務勞動，是怎麼讓本身「財務自由」的呢？這就是個經典的技術商業化問題了。那麼伊萬的策略是怎樣的呢？在發佈 Photopea 的頭三年裏，伊萬沒有用 Photopea 爲本身掙一分錢。到了 2017 年，伊萬開始全職開發 Photopea，在上面投放了廣告，這得到的廣告收入一下就讓他自給自足了。然而不得不說，伊萬的商業化作得很是剋制：廣告只佔很小的頁面空間，你也能夠選擇捐贈開通高級會員來去除廣告。但不論是否付費，用戶能使用的功能都是徹底一致的！即使在這麼「不懂得作生意」的策略下，伊萬的收入也已經很是豐厚了。按照他告訴筆者的說法，他不久就能夠在布拉格全款買房啦。別忘了，他的收入屬於徹底的被動收入，可不須要 996 加班呢。

這麼看來，伊萬已經妥妥地實現了國人求之不得的「財務自由」了。那麼，他過的生活應該是什麼樣的呢？他須要每天本身一我的拼命工做嗎？他有個八臺顯示器環繞滾動着代碼的頂級工做室嗎？他會出手購置豪車一擲千金嗎？就在今年的五一，筆者在出遊歐洲之際有幸在布拉格見到了伊萬。我所看到的他的生活狀態，可能和你想象的截然不同。這是筆者和伊萬在布拉格 Letna 公園的合影：

線下看到的伊萬給筆者的感覺，是他幾乎徹底不追求技術以外的奢侈物質生活。到今天，他仍然和朋友合租、用着平價的安卓手機、還沒買房買車、做息時間規律、坦言一年也極少光顧布拉格的高級餐廳。而他是怎麼開發 Photopea 的呢？沒有頂配的蘋果電腦、沒有低調奢華的機械鍵盤、甚至連一個外接顯示器都沒有——只有普通臥室裏的一臺普通 ThinkPad 筆記本電腦，如此而已。他用來編寫代碼的軟件也是老掉牙的 Notepad++，並無安裝如今前端程序員中流行的各類工具。說實話，若是他來國內的互聯網大公司面試前端開發，以某些面試官對工具苛刻的標準，他說不定連一面都過不了。然而就是在這樣的環境裏，他一我的開發出了 Photopea。看看他的桌子，要不是知道他其實比我不差錢得多，我都想給他贊助點什麼了：

伊萬和 Photopea 的故事夠酷嗎？別忘了，他的工做成果是可以讓咱們每一個人都能享受到的。做爲普通用戶，使用和分享 Photopea 就是對他最大的支持了。儘管直到今天，因爲一些網絡問題，Photopea 的中國用戶佔比還很是低，但咱們和伊萬正在爲你解決這個問題！今天咱們很高興地告訴你們，筆者所在的廈門稿定科技和伊萬達成了正式合做，特別推出 Photopea 的中國版——稿定在線 PS。

稿定 PS 和原版 Photopea 有什麼關係呢？能夠說，這就是個對國內用戶最爲友好的版本：

• 原版 Photopea 難以在大陸訪問，稿定版則部署在國內，幾乎能夠秒開。
• 原版 Photopea 沒有中文字庫，稿定版則內置了主流的中文商業字體。
• 原版 Photopea 界面默認是英文的，稿定版則默認中文。
• 原版 Photopea 默認有廣告，稿定版則爲國內用戶免費去除了廣告。
• 原版 Photopea 和稿定版，在功能上徹底一致。

但願你們有機會能多多體驗，看看 Photopea 是否有咱們說的這麼好用吧！若是你有任何問題反饋，或但願使用伊萬的開源代碼，也能夠關注他的 GitHub 帳號噢。

最後送上兩個彩蛋：

1. 本文全部配圖均使用稿定 PS 編輯。
2. 稿定 PS 還支持手機，快打開體驗吧！

傳送門 - 稿定在線 PS

筆者供職於稿定科技 Web 工具團隊，亦爲本次 Photopea 引進的中方負責人。全文內容已徵得 Ivan Kutskir 本人贊成，確保其真實有效，同時歡迎媒體轉載。