第6章：6.4.3 案例三：批量下载王者荣耀英雄头像 （MATLAB入门课程）

  讲解视频：可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​

MATLAB教程新手入门篇（数学建模清风主讲，适合零基础同学观看）_哔哩哔哩_bilibili

---

本案例我们将从王者荣耀的官网批量下载英雄的头像。通过这个过程，你将学到如何处理动态加载的网页内容，并获取所需的资源。请大家打开下面的网页：

英雄资料列表页-英雄介绍-王者荣耀官方网站-腾讯游戏王者荣耀英雄介绍,全部英雄大全,英雄属性，英雄图片,英雄技能定位，英雄故事，英雄图文视频攻略，助您荣登最强王者宝座!https://pvp.qq.com/web201605/herolist.shtml

在网站中间，你可以看到各个英雄角色的名称和头像（截止2024-03-07共118个英雄），这些头像就是我们想要批量下载的目标。

大家可以在浏览器中打开该网站的源代码，找到和英雄相关的部分：

你可能会注意到，直接查看源代码时，英雄出现的顺序和网站上显示的顺序不同，且数量也没有网站上显示的那么多。

为什么会出现这样的现象呢？这是由于这个网页的内容是通过JavaScript代码动态生成的。当我们访问该网页时，浏览器会首先下载并解析HTML、CSS和JavaScript文件。在这个过程中，初始的HTML源代码可能并不包含所有的内容。相反，JavaScript代码会在网页加载后执行，从服务器获取额外的数据，并动态地在浏览器上创建或修改HTML元素。我们将这种由代码动态生成的网页简称为动态网页。而我们前面两个案例中出现的网页都是静态网页，静态网页的所有内容都是提前准备好的，在编写网页源代码时已经确定。除非网页源代码被重新修改，否则这些内容不会发生变化。

因此，当我们直接查看网页源代码时，只能看到初始的HTML结构和内嵌的JavaScript代码，而无法看到由JavaScript动态生成的内容。这就是为什么在源代码中只能看到部分英雄信息，而在浏览器中却显示了更多的原因。

此外，如果我们尝试使用MATLAB的webread函数来读取网页源码，会发现得到的结果和手动查看源代码得到的结果相同。这是因为webread函数通常只能获取到网页的初始HTML内容，而无法获取由JavaScript动态生成的内容。

那么，我们应该如何爬取动态网页的数据呢？下面介绍几种常见的方法：

（1）使用Selenium等工具：Selenium是一个自动化测试工具，能够模拟真实用户在浏览器中的行为，包括执行JavaScript代码。然而Selenium与MATLAB的结合使用教程相对较少，它通常与Python等其他编程语言结合使用，以模拟浏览器的操作并获取动态生成的内容。如果你熟悉Python，使用Selenium可能是一个不错的选择。

（2）分析网络请求：你可以使用浏览器的开发者工具来查看网页加载过程中的网络请求。特别关注XHR（即XMLHttpRequest）或Fetch请求，因为这些请求通常用于动态加载内容。如果你能找到直接请求所需数据的URL，那么你可能能够绕过JavaScript的执行，直接从这些请求中获取数据。

（3）查找API：有时网站会通过公共或私有的API提供数据。如果存在这样的API，并且你有权限访问它，那么直接从API获取数据将是获取动态内容的最直接和高效的方式。

（4）手动保存已经动态加载好的网页源码：作为一种简单但可能不太自动化的方法，你可以在浏览器中手动加载网页，直到所有动态内容都加载完毕，然后将网页的源代码保存到文本文件中。之后，你可以使用MATLAB或其他工具来读取和分析这个保存好的文件。

上面提及的第二种和第三种方法涉及网页设计和网络服务的深层知识，对初学者而言略显复杂。为了简化流程并让大家都能轻松上手，我们将聚焦于第四种更为直观的方法：通过手动保存已加载的网页源码来获取数据。

大家可以在网页上点击鼠标右键，并选择“另存为”选项。在随后弹出的保存窗口中，将保存类型设置为“网页，全部”，这样就能将完整的网页内容保存到电脑本地。

保存完成后，我们会在电脑上找到两个部分：一个是以HTML格式保存的网页源代码文件，另一个是与之同名的文件夹，这个文件夹里存放着网页中引用的所有附加文件（如CSS样式表、JavaScript脚本、图片等），它们共同构成了我们在浏览器中看到的完整网页。

现在请大家使用浏览器打开这个下载好的HTML格式的网页，然后在浏览器中查看这个网页的源代码，此时网页的源代码中就可以看到所有英雄的数据了。接下来，我们可以使用MATLAB的fileread函数来读取这个网页文件中的文本内容，并从中提取所需的数据。

需要注意的是，这种方法在某些情况下可能并不适用，特别是当网站的动态内容需要用户通过后续交互才能加载时。这些内容可能无法通过浏览器的“另存为”功能被捕获。因此，下面给大家介绍另一种更通用的方法：使用浏览器的“审查元素”功能（在不同浏览器中可能有不同的名称，如“检查”或“检查元素”）。

大家将鼠标悬停在英雄头像和名称所在的区域，然后点击鼠标右键，再点击“检查”：

这时，浏览器会弹出一个审查元素的窗口，展示当前网页的HTML结构和相关样式信息。

当我们在网页的不同区域上使用“检查”功能时，审查元素窗口中的焦点也会随之变化，并高亮显示对应的HTML元素，这为我们提供了直观的元素定位方式。

现在，请在审查元素窗口中寻找并选中标签<div class="herolist-content">。选中后，你会发现网页上的英雄列表区域会以底色高亮的形式突出显示。接下来，请大家在审查元素的窗口中点击鼠标右键，然后点击复制(Copy)选项，接着再点击复制元素(Copy element)：

接下来，我们新建一个txt格式的文本文件，并将复制好的内容粘贴到该文件内：

为了方便大家参考，我在本章配套的代码压缩包中提供了一个名为“从王者荣耀官网复制的元素.txt”的文件，里面包含了我提前复制好的内容。如果你对上述操作步骤有任何疑问，可以观看本书配套的视频讲解，里面详细演示了整个操作过程。

注意：由于网页数据可能会更新或网页结构可能会改版，因此未来大家在提取数据时可能会遇到一些变化。但不用担心，只需按照类似的流程重新操作一次即可适应新的变化。

接下来，我们将使用 MATLAB来导入这个txt文件，并提取出我们所需的数据。

提取出来的D有两列，第一列为英雄的头像的链接，第二列为英雄的名称。然而，第一列的链接并不完整，缺少前缀。我们可以在审查元素窗口中看到完整的链接：

此外，我们也可以将鼠标悬停在英雄头像上面，点击鼠标右键后选择“复制图片地址”：

这样也能看到图片的完整链接，即D中第一列网页地址缺少的前缀为“https:”。

接下来，我们将介绍一个新的函数：websave函数，将这些已经补全前缀的链接对应的英雄头像图片，一一下载至电脑本地进行保存。

websave函数的使用方法如下：

outfilename = websave(filename,url) 保存来自 url 指定的 Web 服务的内容，并将其写入 filename指定的文件中。

例如，下面的例子来自MATLAB官网，运行成功后，我们会将url链接对应的图片下载在MATLAB的当前文件夹下，图片文件的名称由websave函数的第一个输入参数指定。

回到王者荣耀英雄头像的下载任务中，我们首先使用mkdir函数创建一个名为“英雄头像”的文件夹，该文件夹用于存储即将下载的图片。随后，我们通过cd命令将MATLAB的当前文件夹切换到这个新建的文件夹内，这样就能确保所有下载的图片都直接保存在此处。

接下来，我们使用循环语句来遍历数据D中的每一行，为每个英雄的头像链接添加前缀，并使用websave函数下载对应的图片。另外，图片的文件名将设置为英雄的名称。同时，我们在每次下载完成后暂停0.1秒，以减少对服务器的负载压力。

另外，推荐大家使用try-catch语句来捕获可能出现的下载错误。这样，即使某个英雄的头像下载失败，程序也能继续下载其他英雄的头像。

---

  点击下方的CSDN专栏阅读下一篇文章：

MATLAB入门课程专栏