今天我们有一个快速分享：来自英国南安普顿的网页开发者 Joe Lambert，现就职于 Rareloop 公司，他接受了 Instagram 工程团队提出的图像拼接挑战，但他没有使用服务器端代码，而是使用了 HTML5 canvas。这里有一个关于 他解决这个问题的视频演示

接下来是简短的访谈，我们聊了聊他是如何解决这个问题的，以及为什么选择 Web 技术。

1) 比赛规则中提到可以使用 Python、Ruby 或 C++，而你却选择了 JavaScript 和 Canvas。为什么？

JavaScript 是我的首选语言，也是我平时最常用的语言。我也觉得它很有趣，因为很容易将你的作品发布到网上并立即展示给别人，无需下载或担心依赖项。我并不是真的想被 Instagram 录用，所以严格遵守规则并不是什么大事。本质上，这是一个有吸引力的难题，我认为可以在浏览器中解决，所以想证明这是可行的。

实际上，我从一开始就知道，创建用于拼接图像的算法只是我想做的事情的一半。这本身就是一个挑战，解决它会很有成就感，但我真的想达到一个能够让碎片移动到正确位置的程度。在其他任何环境中，我都不可能这么快地创建这种效果。

2) 你是如何解决图像拼接问题的？之前做过类似的事情吗？你使用的逻辑是什么？

我不太担心算法的效率，所以我只是从思考人类如何解决这类问题开始。我之前也玩过一些图像数据，但没有什么可以直接用于解决这个问题。

如果我在现实世界中解决这个问题，我会先随机拿起一片碎片，然后拿起其他每一片碎片，看看它是否看起来适合放在我手中的碎片的左边或右边。然后我会重复这个过程，直到图像恢复到原来的状态。

这表明了我的代码应该具有的结构，我只需要想办法计算出两条带是否应该彼此相邻。为此，我只是比较了最靠近每条边缘的像素，并测量了颜色值之间的欧几里得距离。看起来效果还不错！

3) 我看到你的解决方案中还没有使用类型化数组。现在看来性能不错，你认为它们会有影响吗？

我不确定，对于这个挑战，效率并不是我的首要任务，所以我并没有真正尝试优化它，但正如你提到的，它似乎运行得很好。我没有尝试过用更大的图像来测试算法，但我怀疑它的性能不会很好。

4) 到目前为止，反馈如何？Instagram 联系过你吗？

反馈非常积极，尤其是在 Twitter 上。我认为总的来说，这场比赛的关注度很高，这肯定有帮助。

Instagram 还没有联系我，但希望能够收到他们的消息。我怀疑他们正在关注所有使用推荐语言的人。

5) 鉴于这个挑战如此简单，你是否能想到其他关于图像和 Canvas 的挑战？例如，通过扩展 API，你认为可以有哪些方法让开发者更容易使用？

在 Canvas 中访问像素数据的方式有点复杂，提供一些辅助函数来让你通过 X/Y 坐标访问单个像素可能会很有用。我最终编写了一个小辅助函数来完成这个挑战，我很快就会尝试将代码上传到 GitHub 上，所以这可能对其他人有用。

能够对 CanvasPixelArray 对象调用 toDataURL() 也会很有用。我的实现使用了 DOM 和 CSS3 过渡来在算法解决顺序后将图像移动到正确的位置，能够访问每个切片的 Data URI 会很方便。

如果你想与 Joe 交流，他可以在 Twitter 上找到，他的账号是 @joelambert。