这个前端写的免费 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 技术极限的产品。它的界面之下，隐藏了许多伊万的独门武功，许多技术指标迄今仍然独步天下。举几个容易理解的例子：
图像处理其实非常耗资源。例如一份尺寸 4000×4000 带十个图层的文档，其内存占用就是单张 1000×1000 图片的 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 账号噢。
最后送上两个彩蛋：
本文所有配图均使用稿定 PS 编辑。稿定 PS 还支持手机，快打开体验吧！传送门：
https://link.juejin.im/target=
https%3A%2F%2Fps.gaoding.com%2F%3Fhmsr%3Divan-intro-juejin转自掘金
https://juejin.im/post/5d1178c3e51d45108223fc92
