显然，Instagram不希望你进行自动化互动。他们的HTML是一堆杂乱无章的随机生成类名和深度嵌套的div。每次部署时，结构都会变化。任何依赖于DOM选择器的脚本在几周内就会失效，因为类名不再存在。但无论如何，这并不重要。Instagram可以尽量混淆他们的代码，因为代码是给机器用的。但用户界面……用户界面是给人用的。一个心形图标必须看起来像心形图标。评论按钮必须在用户期望的位置。布局必须一致到足以让人轻松导航。因此，与其和DOM作斗争，不如完全绕过它。拍一张截图。根据视觉效果找到心形。获取其坐标。把光标移动到那里。点击。完成。这适用于任何渲染为像素的东西。网页应用、原生应用、游戏、终端。如果人可以看到并点击它，计算机也可以也是这样。没有选择器，没有API，没有平台特定的钩子。就是计算机视觉和光标自动化。不幸的是，你不能仅仅硬编码一个位置。事物总是四处移动。较长的标题会把操作栏推下去。位置标签会增加一行。图像轮播会占用更多的垂直空间。每个帖子都会以不同的方式压缩或展开布局。在两个帖子之间导航，看看心形的位置发生了什么：心形在帖子之间移动。位置从来都不相同。计算机视觉解决了这个问题。与其猜测心形应该在哪里，不如看看屏幕，找到它们实际上在哪里。屏幕太多，误报太多。简单的做法是：将心形图标作为模板，在屏幕上找到它。在哪里匹配，就是心形。这是你可以做的最基本的计算机视觉操作。然而效果并不太好。完整的屏幕截图非常大。通常屏幕上超过700万像素。而心形则很小，约70x60像素。这需要搜索大量的表面区域。在那么多像素中，有很多东西大约看起来像心形。你会得到太多的误报。检测技术没问题，搜索空间才是问题。屏幕上充满了噪音。你搜索的面积越大，发现的噪音就越多。缩小搜索空间。解决方案是不再搜索整个屏幕。相反，找出屏幕上易于检测的元素，并利用它们来确定心形所在的位置。在Instagram上，有两个始终容易找到的东西：每个帖子的右上角的三点菜单（⋯）。它小巧、对比度高并且视觉上独特。它总是存在。每个帖子底部的操作栏（喜欢/评论/分享）。它是宽的、可预测的图标模式。这两者都可以通过基本的模板匹配在毫秒内找到。但我们并不关心它们本身。我们关心的是它们告诉我们的内容：三点菜单正好在心形列的上方。操作栏正好在其下方。如果我们知道这两个标志物的位置，我们就知道心形的位置。它们位于它们之间的垂直区域。crop.x = triple_dots.x crop.y = triple_dots.y + triple_dots.height crop.width = triple_dots.width crop.height = action_bar.y - crop.y - action_bar.height x 0.2 搜索区域中剩下的只有实际的心形和在该确切列中的其他东西。而且由于裁剪区域是根据屏幕上标志物的实际位置而不是硬编码的，因此它会自动适应每个帖子。标志物的位置可能因帖子的内容而高或低，但它们与心形之间的几何关系始终是一样的。滑动窗口。现在搜索空间又小又干净，你可以运行滑动窗口。拿心形模板并逐像素滑动穿过搜索区域。为每个位置打分。匹配越好，越可能是心形。滑动窗口故意较松以捕捉每一个可能的心形。但这也意味着它会捕捉到不是心形的东西。Instagram上的心形都是在同一垂直列上。每一个都是。大多数检测将在那条线上。任何不在那条线上的东西都是异常值：· · · · · · · · · · · · · ♡ · · ← 大多数检测在这里 · · · · · · · · · · · · · ♡ · · ← 同一列 · ✕ · · · · · · ← 异常值（偏向左侧） · · · · · ♡ · · ← 同一列 · · · · · · · · · · · · · ♡ · · ← 同一列 · · · · · · · · · · · · · · ✕ · ← 异常值（偏向右侧） · · · · · ♡ · · ← 同一列 · · · · · · · · 心形（♡）聚集在一个X坐标上。误报（✕）则分散在其他地方。滑动窗口认为它们看起来像心形，但它们不在列上。因此，我们找到所有检测中最常见的X坐标，即共识线，并丢弃任何距离超过10像素的东西。其实就是找到X值的众数，并把其他东西当作噪声。一些代码就能几乎消除所有误报。滑动窗口故意宽松以捕获每一个可能的心形。这部分内容继续讨论这个过程。