本发明涉及浏览器页面转码领域，具体涉及含图片网页的pdf转码方法、存储介质。
背景技术：
当前业界将网页导出为pdf的主要流程是将网页绘制到canvas中，然后将canvas导出为图片，最后将该图片保存为pdf。
当网页中有图片的时候，默认是无法被导出为pdf的。原因是将网页绘制到canvas的时候，canvas无法绘制远程加载的图片，只能绘制本地缓存的图片(base64编码的图片)。所以在有pdf导出需求的网页里，普遍的做法是事先将图片编码(base64)后写死在代码中，这么做有几个缺点：1、代码中包含图片的base64编码，导致网页体积太大，特别是一个页面有多个图片或者单个图片非常大的时候；2、如果图片有更新的话，必须要重新编译和发布代码，导致代码缓存失败以及发布成本太高。
技术实现要素：
本发明所要解决的技术问题是：提供含图片网页的pdf转码方法、存储介质，提升转码性能，优化用户体验。
为了解决上述技术问题，本发明采用的技术方案为：
含图片网页的pdf转码方法，包括：
主线程遍历页面中的所有img标签，若当前遍历到的img标签的src属性对应远程地址，则创建一对应的子线程；
子线程启动后，从主线程获取对应的远程地址；
子线程依据所获取的远程地址加载对应的远程图片，并对其进行base64编码；
子线程发送编码结果至主线程；
主线程将子线程对应的img标签的src属性修改为所述编码结果。
本发明提供的另一个技术方案为：
一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能够实现上述含图片网页的pdf转码方法所包含的步骤。
本发明的有益效果在于：基于多线程异步执行，能够显著提高导出pdf的性能；接口简单，对原有代码的调整较小；无需预先对图片进行编码并写死在代码中，因而显著减少占用内存；远程图片的获取和编码同步进行，即使图片有更新，也同样能够保证转码结果的有效性，省去重新编译和发布代码的过程，不仅优化了用户体验，而且节省了大量成本。
附图说明
图1为本发明实施例一种含图片网页的pdf转码方法的流程示意图；
图2为本发明实施例二遍历过程的流程示意图；
图3为本发明实施例二执行远程加载和编码任务过程主线程与子线程的交互示意图。
具体实施方式
为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。
本发明最关键的构思在于：基于多线程异步执行各图片的编码任务，显著提高转码效率；远程图片的获取和编码同步进行，保证转码结果的有效性。
本发明涉及的技术术语解释:
请参照图1，本发明提供含图片网页的pdf转码方法，包括：
主线程遍历页面中的所有img标签，若当前遍历到的img标签的src属性对应远程地址，则创建一对应的子线程；
子线程启动后，从主线程获取对应的远程地址；
子线程依据所获取的远程地址加载对应的远程图片，并对其进行base64编码；
子线程发送编码结果至主线程；
主线程将子线程对应的img标签的src属性修改为所述编码结果。
进一步地，所述子线程启动后，从主线程获取对应的远程地址，具体为：
子线程启动后，发送完成初始化的消息至主线程；
主线程发送转换任务至子线程，所述转换任务包含所述子线程对应的img标签的远程地址。
由上述描述可知，子线程启动后，即可通过与主线程的交互获取并执行对应的编码任务，通过多线程异步执行任务，显著提高了编码效率，大大缩短转码页面所有图片所耗时间。
进一步地，所述子线程依据所获取的远程地址加载对应的远程图片，并对其进行base64编码，具体为：
子线程接收所述转换任务后，创建一加载器来加载转换任务中的远程地址对应的远程图片；
若子线程监听到加载器的加载错误事件，则发送加载失败消息至主线程，并结束所述转换任务；
若子线程监听到加载器的加载成功事件，则创建一读取器来对已加载的远程图片进行base64编码。
由上述描述可知，子线程先通过加载器进行远程加载图片，若成功再创建读取器进行编码，失败则直接结束任务。不仅能够节省资源，而且能够高效执行任务。
进一步地，还包括：
主线程创建一队列；
将所创建的子线程及其对应的img标签和远程地址添加到所述队列中；
主线程接收到编码结果后，依据队列获取所述子线程对应的img标签和远程地址。
由上述描述可知，通过队列形式存储各个图片的编码任务，能够确保每个任务都被执行，更有利于管理。
进一步地，所述主线程将子线程对应的img标签的src属性修改为所述编码结果，之后，还包括：
主线程销毁发送编码结果的子线程；
主线程在队列中删除所述子线程及其对应的img标签和远程地址。
由上述描述可知，任务完成后，即销毁子线程以释放内存，减少内存占用；同时还将删除队列中子线程的相关信息，标识对应图片编码成功。
进一步地，还包括：
主线程判断所述队列是否为空；
若是，则执行转码操作；
若否，则等待子线程消息。
由上述描述可知，通过队列确认是否网页所有图片都已成功编码，能保证网页中所有的图片都正确地显示在转码后pdf的对应位置，提高转码结果的准确性。
进一步地，创建子线程之后，还包括：初始化子线程。
由上述描述可知，子线程被创建后即可启动，与主线程异步执行编码任务，显著提高网页转码的效率。
对应本领域普通技术人员可以理解实现上述技术方案中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来实现的，所述的程序可存储于一计算机可读取的存储介质中，该程序在执行时，可包括上述各方法的流程。
其中，所述的存储介质可以是磁盘、光碟、只读存储记忆体(read-onlymemory，rom)或随机存储记忆体(randomaccessmemory，ram)等。
即同时提供一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能够实现下述包含图片网页的pdf转码方法所包含的步骤：
主线程遍历页面中的所有img标签，若当前遍历到的img标签的src属性对应远程地址，则创建一对应的子线程；
子线程启动后，从主线程获取对应的远程地址；
子线程依据所获取的远程地址加载对应的远程图片，并对其进行base64编码；
子线程发送编码结果至主线程；
主线程将子线程对应的img标签的src属性修改为所述编码结果。
进一步地，所述子线程启动后，从主线程获取对应的远程地址，具体为：
子线程启动后，发送完成初始化的消息至主线程；
主线程发送转换任务至子线程，所述转换任务包含所述子线程对应的img标签的远程地址。
进一步地，所述子线程依据所获取的远程地址加载对应的远程图片，并对其进行base64编码，具体为：
子线程接收所述转换任务后，创建一加载器来加载转换任务中的远程地址对应的远程图片；
若子线程监听到加载器的加载错误事件，则发送加载失败消息至主线程，并结束所述转换任务；
若子线程监听到加载器的加载成功事件，则创建一读取器来对已加载的远程图片进行base64编码。
进一步地，还包括：
主线程创建一队列；
将所创建的子线程及其对应的img标签和远程地址添加到所述队列中；
主线程接收到编码结果后，依据队列获取所述子线程对应的img标签和远程地址。
进一步地，所述主线程将子线程对应的img标签的src属性修改为所述编码结果，之后，还包括：
主线程销毁发送编码结果的子线程；
主线程在队列中删除所述子线程及其对应的img标签和远程地址。
进一步地，还包括：
主线程判断所述队列是否为空；
若是，则执行转码操作；
若否，则等待子线程消息。
进一步地，创建子线程之后，还包括：初始化子线程。
实施例一
本实施例提供一种针对包含图片网页的pdf转码方法，主要包括一个主线程流程和对应图片个数的子线程流程。
方法包括：
s1：用户触发导出pdf指令后，主线程创建一队列；
s2：主线程遍历页面中的所有img标签，判断各个img标签的sr属性记载的是远程地址还是base64编码；
若遍历到的img标签的src属性对应的是远程地址，则创建一与该img标签对应的子线程，并将该子线程实例、该img标签及其src属性记载的远程地址作为一个编码任务添加到队列中；也就是说，一个子线程对应一个远程图片的编码任务。
若遍历到的img标签的src属性对应的不是远程地址，则继续遍历。
s3：子线程被创建后即可启动，从主线程获取对应的远程地址；
具体地，子线程创建并启动后，发送完成初始化的消息至主线程；主线程依据队列中所述子线程对应的信息发送转换任务至子线程，所述转换任务包含所述子线程对应的img标签的远程地址，用于告知其需要加载对应的远程图片并完成编码。
s4：子线程依据所获取的远程地址加载对应的远程图片，并对其进行base64编码；
具体地，子线程接收转换任务后，创建一加载器来加载转换任务中的远程地址对应的远程图，并监听加载器的事件；
若子线程监听到加载器的加载错误事件，则发送加载失败消息至主线程，并结束所述转换任务；
若子线程监听到加载器的加载成功事件，则创建一读取器来对已加载的远程图片进行base64编码。
s5：子线程发送编码结果至主线程；
s6：主线程接收到编码结果后，依据队列获取所述子线程对应的img标签和远程地址，将该img标签的src属性修改为接收到的编码结果。
s7：主线程销毁发送已成功发送编码结果的子线程；
s8：主线程在队列中删除已销毁子线程的相关信息。
s9：主线程判断队列是否为空；
若是，则执行对网页的转码操作，即将当前网页转码为pdf；
若否，则等待接收子线程发来的消息。
实施例二
请参照图1和图2，本实施例在实施例一的基础上做进一步限定：
方法包括：
1、在主线程进行页面初始化；
由于需求的多变性，有些页面一开始并没有导出pdf的需求。为了对这类应用实现最小的改动，需要做到向下兼容。所以，在页面初始化过程中，本实施例不做任何修改，就是说，之前页面的img标签，无需做任何修改。
2、用户触发导出pdf交互；
3、主线程创建一个等待队列(waitqueue)，队列存储的数据包含：各个子线程实例及其对应的远程图片地址和对应的img标签。(一个线程负责一个img标签及其对应的图片url地址)；
4、主线程遍历页面中的所有img标签，判断img标签的src是远程地址还是base64编码；
如果遍历到的img标签的src属性是远程地址，那么创建一个子线程(worker)，并且将这个img标签、远程地址，以及子线程实例添加到等待队列(waitqueue)中，然后继续遍历；
如果遍历到的img标签的src属性是不是远程地址，那么继续遍历；
如果循环结束后，waitqueue长度为0则表示页面没有任何图片，那么直接跳到步骤10，否则进行下一步骤；
5、如图2所示，由于子线程与主线程异步，因此子线程被创建后即可启动，在启动成功后，发送一个名称为childinitready的消息给主线程；
6、主线程收到childinitrread消息后，发送一消息dotask给子线程，消息内容是需要该子线程转换的远程图片地址。也就是说，子线程通过接收这个消息明确自己的任务，可以理解为任务消息。
7、子线程收到dotask消息后，开始如下工作：
①使用浏览器原生接口(xmlhttprequest)创建一个加载器；
②监听加载器的加载成功事件和加载错误事件；
③当捕获到“加载错误”时，子线程发送childencodeerror消息给主线程，告知其加载失败，并结束当前子线程的任务；
④当捕获到“加载成功”时，使用浏览器原生接口(filereader)创建一个读取器，执行以下内容：
a、通过读取器的readasdataurl接口，将已经加载到本地的远程图片进行base64编码；
b、子线程发送childencodeready消息给主线程，消息内容为base64编码；
c、当前子线程任务结束。
8、主线程收到childencodeerror消息后，销毁waitqueue中的所有子线程，转换失败；
9、主线程收到childencodeready消息后，执行以下内容：
①在waitqueue中查找发来该消息的线程对应的信息，包括：img标签，图片地址，子线程实例；
②将img标签的src属性的值修改为接收到的base64编码；
③销毁该子线程以释放内存；
④将该任务(该子线程及其相关信息)从waitqueue中删除；
⑤判断waitqueue是否为空，如果不为空，继续等待其他子线程的结果，如果为空，执行步骤10；
10、使用html2canvas库将页面转换为一个图片，通过js2pdf库，将该图片导出为pdf文件。
本实施例同时具有以下优点：
(1)基于多线程的方案，使得导出pdf的性能更佳；
(2)接口简单，对原有的代码调整较小；
(3)占用内存更小；
(4)显示远程图片和编码同步进行，提供更好的用户体验。
实施例三
本实施例对应实施例一或实施例二，提供一具体运用场景：
假设有一个网页，内容如下：
<html>
<body>
<imgid＝”i1”src＝”http://www.abc.com/a.png”/>
<imgid＝”i2”src＝”data:image/png；base64,safjpai1238jf0a832014”/>
<imgid＝”i3”src＝”http://www.abc.com/b.png”/>
</body>
</html>
则基于实施例一或实施例二执行步骤如下：
1、用户触发导出pdf交互；
2、主线程创建等待队列：waitqueue＝newarray()；
3、遍历所有img标签；
①第一个id为i1的img标签；
确认src是远程地址；
创建一个子线程t1；
在waitqueue添加一条记录：{线程：t1，图片地址：http://www.abc.com/a.png，img标签：i1}；
继续循环；
②第二个id为i2的img标签；
确认src并非远程地址；
继续循环；
③第三个id为i3的img标签；
确认src是远程地址；
创建一个子线程t2；
在waitqueue添加一条记录：{线程：t2，图片地址：http://www.abc.com/b.png，img标签：i3}；
继续循环
4、主线程收到childinitready消息；
判断发送消息的是哪个线程；
依据waitqueue的记录将该线程对应img标签的远程地址，通过dotask发送给该线程；
5、子线程收到dotask消息；
加载远程图片并进行base64编码；
发送childencodesuccess消息给父线程，内容为base64后的内容(demo中假设所有编码都能成功)；
6、父线程收到来自子线程的childencodesuccess消息；
依据waitqueue的记录将当前子线程对应img标签的src属性设置为base64；
将当前线程对应的任务数据从waitqueue删除；
判断waitqeuue中是否还有任务；
如果有，继续等待消息；
如果没有，说明全部转换完成，执行下一步；
7、使用html2canvas将body下的内容转为图片，通过js2pdf将图片转为pdf。
实施例四
本实施例对应实施例一至实施例三，提供一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能够实现上述实施例一至实施例三任意一项实施例所述的包含图片网页的pdf转码方法所包含的步骤。具体的步骤内容在此不进行复述，详情请参阅实施例一至实施例三的记载。
综上所述，本发明提供的含图片网页的pdf转码方法、存储介质，不仅能显著提高转码性能，缩短转码所需时间，优化用户体验；而且能确保转码结果与当前的网页信息同步，提高转码的有效性；进一步地，还同时具备接口简单，代码改动少，以及内存占用更少等优点，因此实用性高。
以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。
1.含图片网页的pdf转码方法，其特征在于，包括：
主线程遍历页面中的所有img标签，若当前遍历到的img标签的src属性对应远程地址，则创建一对应的子线程；
子线程启动后，从主线程获取对应的远程地址；
子线程依据所获取的远程地址加载对应的远程图片，并对其进行base64编码；
子线程发送编码结果至主线程；
主线程将子线程对应的img标签的src属性修改为所述编码结果。
2.如权利要求1所述的含图片网页的pdf转码方法，其特征在于，所述子线程启动后，从主线程获取对应的远程地址，具体为：
子线程启动后，发送完成初始化的消息至主线程；
主线程发送转换任务至子线程，所述转换任务包含所述子线程对应的img标签的远程地址。
3.如权利要求2所述的含图片网页的pdf转码方法，其特征在于，所述子线程依据所获取的远程地址加载对应的远程图片，并对其进行base64编码，具体为：
子线程接收所述转换任务后，创建一加载器来加载转换任务中的远程地址对应的远程图片；
若子线程监听到加载器的加载错误事件，则发送加载失败消息至主线程，并结束所述转换任务；
若子线程监听到加载器的加载成功事件，则创建一读取器来对已加载的远程图片进行base64编码。
4.如权利要求1所述的含图片网页的pdf转码方法，其特征在于，还包括：
主线程创建一队列；
将所创建的子线程及其对应的img标签和远程地址添加到所述队列中；
主线程接收到编码结果后，依据队列获取所述子线程对应的img标签和远程地址。
5.如权利要求4所述的含图片网页的pdf转码方法，其特征在于，所述主线程将子线程对应的img标签的src属性修改为所述编码结果，之后，还包括：
主线程销毁发送编码结果的子线程；
主线程在队列中删除所述子线程及其对应的img标签和远程地址。
6.如权利要求4所述的含图片网页的pdf转码方法，其特征在于，还包括：
主线程判断所述队列是否为空；
若是，则执行转码操作；
若否，则等待子线程消息。
7.如权利要求1所述的含图片网页的pdf转码方法，其特征在于，创建子线程之后，还包括：初始化子线程。
8.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序在被处理器执行时，能够实现上述权利要求1-7任意一项所述的含图片网页的pdf转码方法所包含的步骤。
技术总结