亚当·帕克斯、戴夫·迈尔斯、亚尼克·吉利莫特
编辑图像编辑器
2018 年底,我们决定构建自己的图像编辑器,以便为客户提供必要的工具和直观的体验。我们发布了一个具有最低限度功能集的版本,并计划对其进行快速迭代。我们刚刚发布了第二个版本,它有几个新的强大、高质量的调整功能,包括撤消/重做和一套独特的 Squarespace 自定义过滤器。这就是我们构建过滤器的方式。
过滤结果以构建过滤器
Squarespace 在开发产品时始终遵循设计优先的理念。我刚开始工作时(当时我们只有 60 名员工)就是这样,现在我们的员工人数已接近 1,000 人,这种理念依然适用。作为这里的工程师,在开发新产品时,你必须 埃及 whatsapp 号码数据 5 万 不断有意识地努力保持这种设计优先的思维。有时这意味着在将新面板添加至更深层次之前,要仔细考虑用户体验问题。有时这意味着确保我们的客户能够使用一流的设计工具来打造最漂亮的网站。正是这种第二种设计优先的思维方式促成了我们新图片编辑器中的滤镜。
为了简化画布绘制和图像处理逻辑,我们决定使用流行的FabricJS 库。FabricJS 有一小组内置滤镜,但它们的作用范围有限,并且通常不关心最终图像的视觉质量。此时,我们的设计团队提供了大约十几个定制设计的滤镜,并且无法将设计工具中的调整转化为代码。我们必须将自己的设计专业知识用于客户,并提供一套以 Squarespace 为核心的滤镜。因此,我们的解决方案必须解决两个重要问题:
设计团队必须能够完全使用他们选择的图像编辑软件进行工作。
在我们的图像编辑器中应用过滤器时,它必须与所需的结果完全匹配。
从某种意义上说,还有第三个考虑因素:我们团队中没有人曾经构建过类似的东西。是时候研究了!
任何有经验的软件工程师都可能猜到,第一步是在互联网的集体知识中进行搜索:“如何在 JavaScript 中应用图像滤镜”。经过几次迭代和搜索词的细化后,我们了解到查找表的概念。