三十分钟完成一个“我们是谁”编辑器

这两天朋友圈又被刷屏了，这次是“我们是谁”系列。咱们在这里就不分析其中的用户心理了，只讨论一下如何在三十分钟内快速的完成一个“我们是谁”的编辑器。

本文没什么干货，只有一些思路的讨论，在线演示（使用手机访问）： http://impony.com/demo/who-we-are/

打眼一看大家就都知道，核心功能是图片上的文字替换。使用前端技术要做到文字和图片的合成，首先想到的就是 canvas。

顺着这个思路往下走，发现要考虑的细节太多了，比如：

1. 高像素密度下图片的精细展示问题
2. 文字与图片的对齐问题
3. 不同设备尺寸 canvas 的缩放问题
4. 用户输入文字以及实时预览的交互方式问题
5. 图片生成与输出问题

等等等等。

虽然以上问题都不是难点，但对于蹭热点的 H5 来说，时间就是生命，所以第一要素是快，这么看来，需要换一种实现思路了。

之前有了解过一个框架 html2canvas，知乎的“问题反馈”就有用到，能够把页面快速的“截屏”。说到这里小伙伴们肯定已经恍然大悟了，如果我们利用浏览器自身强大的解析能力，将图片和文字摆放好位置，再利用 html2canvas 生成“截屏”，不就达到目的了吗。

用户输入及实时预览的交互问题就更简单了，下面这行代码大家用的肯定溜的不要不要的。

<input type="text" value="" />

至此，看起来很复杂的问题已经分解为两个简单的步骤：

1. 利用 CSS 将图片和单行输入框（文字编辑加预览）进行叠加布局
2. 利用 html2canvas 截屏保存

主要逻辑完成了，剩下的就是一些细节的处理。我午饭后趁着消食的空当做了这个编辑器出来，相信你肯定也可以的。

以上就是三十分钟完成一个“我们是谁”编辑器的故事，作为一个大叔级互联网从业者，我想说的是，当你遇到一个复杂的问题的时候，不要钻牛角尖，很多时候是你想的复杂了，要善于借力打力。