基于多线程的磁共振3D图像大数据量渲染方法及系统

摘要

本发明公开了一种基于多线程的磁共振3D图像大数据量渲染方法及系统，本发明通过数据库存储图像数据，图像数据使用NIfTI格式进行描述，使用gzip对图像数据进行压缩，数据库与服务端交互，实现图像数据的存取和转发，客户端开辟子线程，通过服务端从数据库获取图像数据并渲染到浏览器页面上；服务端负责连通客户端和数据库，为客户端从数据库获取图像数据搭建桥梁；客户端主线程实现子线程管理和papaya渲染，子线程管理具体为开辟子线程、并负责与子线程进行通信，papaya渲染具体为将获取到的图像数据渲染到浏览器页面上、展示给用户。本发明可以解决前端浏览器页面渲染大数据量的磁共振3D图像的问题，且具有较高性能。

说明书

技术领域

本发明涉及前端页面渲染性能领域，尤其涉及一种基于多线程的磁共振3D图像大数据量渲染方法及系统。

背景技术

网页前端开发的主要职责是将网页的界面更好地呈现给用户、同时提供给用户流畅的交互体验，因此为了尽可能地提高页面呈现性能、减少呈现时间，数据计算和大数据量的操作基本是交由后端进行的，后端将最终结果给到前端、让前端可以直接或者只进行少量操作即可渲染到页面上。早期的网站主要内容以图片、文字等静态内容为主，用户使用网站的行为也以浏览为主。随着互联网技术和前端技术的快速发展、用户需求不断推陈出新，对现代网页的要求也越来越高：更加美观酷炫的展示效果、更加丰富多变的展示内容、更加流畅便捷的交互体验以及更加强大复杂的功能。

尽管前端发展至今，已经能够进行一些复杂计算和部分场景下的大数据量操作，但其实是一种伪大数据量操作。举个例子，前端能够在对性能“锱铢必较”的移动终端动态渲染10万条数据的表格，如果一次性加载这10万条数据，假设每条数据只有一个英文字母，UTF-8编码，那么一个英文字母1个字节（Byte），10万条数据有10万个字节，即97.7KB。当然一般情况下一条数据不可能只有一个英文字母，它可能是一个包含图片、富文本、视频等丰富内容的对象（Object）。但即使是97.7KB，对前端尤其是移动端渲染性能来说、也是一个不小的挑战。为了提高性能、让用户顺畅地看到这10万条数据，前端会将这10万条数据进行分割，一次只渲染比如10条，随着用户视窗的滚动、加载渲染该视窗内的数据，并对滚出视窗的数据进行“卸载”，所以实际上，前端永远只渲染当前视窗的10条数据，这就是“伪大数据量操作”。

对于磁共振3D图像数据，如果以.json文件存储，大概有36MB；以.nii.gz文件存储，大概有650KB。这都远大于上述的97.7KB。现在，我们需要将磁共振3D图像通过web浏览器展示给用户浏览和交互，因为整个磁共振3D图像都在用户视窗内，即所有的数据都得同时加载，所以不能使用“伪大数据量操作”方式进行性能优化，只能另外寻找解决办法。

对于在浏览器上将描述图像的信息渲染成图像（该过程即称为可视化），目前普遍的技术方案是：将从服务器获取的描述图像信息的JSON文件进行数据结构转换后，交由诸如Echarts、Highcharts等可视化库进行渲染。这个方案有3个致命缺点：1）用JSON文件描述图像信息，文件大小为36MB左右，渲染过程中很可能会导致网页崩溃；2）Echarts、Highcharts等可视化库是基于SVG（本质是DOM）绘制图片的，它们不擅长大数据量的渲染，同样会导致网页崩溃；3）从服务器获取的数据量过大，而运行在浏览器环境的JavaScript是单线程的，获取数据的逻辑会导致后续逻辑阻塞，这就造成了用户需要等很久才能看到浏览器开始渲染数据，用户体验极差。

发明内容

本发明目的在于针对现有技术的不足，提出一种基于多线程的磁共振3D图像大数据量渲染方法及系统，采用经过gzip压缩的NIfTI格式文件存储磁共振3D图像的描述信息，在主线程处理逻辑中通过Web Worker开辟出一条子线程来专门负责从服务器读取图像信息数据，并通过异步方式将.nii.gz文件的内容逐段传递给基于Canvas的磁共振数据可视化库papaya进行图像渲染。

本发明的目的是通过以下技术方案来实现的：一种基于多线程的磁共振3D图像大数据量渲染方法，包括：

（1）用户进入客户端主线程，并开辟一条客户端子线程，客户端主线程向客户端子线程发送获取磁共振3D图像数据的指令；

（2）客户端子线程向服务端发送获取图像数据的请求，服务端从数据库获取磁共振3D图像数据，并流式地响应给客户端子线程；

（3）客户端子线程接收到服务器返回的图像数据流，设定分段值并将图像数据拆分成若干块，分段地转发给客户端主线程；

（4）客户端主线程将接收到的图像数据片段异步地传递给医学研究图像渲染工具，将获取到的磁共振3D图像数据渲染到浏览器页面上；

（5）客户端子线程判断是否已经将所有图像数据转发给客户端主线程，若否，则重复步骤（3）和步骤（4）；若是，则进入步骤（6）；

（6）客户端子线程通知客户端主线程已经完成所有图像数据的接收和转发，客户端主线程关闭客户端子线程，流程结束。

进一步地，所述磁共振3D图像数据存储在数据库，使用NIfTI格式进行描述，并使用gzip对图像数据进行压缩，所述数据库与服务端交互，实现图像数据的存取和转发。

进一步地，所述客户端主线程通过 this.worker = new Worker(URL.createObjectURL(new Blob([(f.toString())()])))来开辟客户端子线程；WebWorker是HTML5标准的一部分，它规定通过new Worker()来创建子线程，new Woker()需要指定一个URL入参；上述代码中的f是客户端子线程函数，处理客户端子线程接收和转发磁共振3D图像数据的逻辑；f.toString()将该函数字符串化、并作为参数传递给new Blob()；new Blob()创建一个Blob对象，Blob对象表示类文件对象；URL.createObjectURL()将Blob对象转换为一个对象URL，作为参数传递给new Worker()从而创建子线程；最后将创建出来的子线程赋值给this.worker变量；所述客户端主线程通过this.worker.terminate()来关闭客户端子线程；其中terminate是worker的一个方法，用来立即终止worker。

进一步地，步骤（3）具体过程为：

（3.1）客户端子线程接收服务端返回的图像数据流之后，将图像数据存入缓存中；

（3.2）客户端子线程判断当前缓存是否为空；如果为空，则进入步骤（3.5）；否则进入步骤（3.3）；

（3.3）判断当前缓存内图像数据大小是否不超过预设的分段值，如果是，则将缓存内数据全部取出；如果不是，则从缓存内截取分段值大小的图像数据；

（3.4）将从缓存中取出的数据输出给客户端主线程，并返回到步骤（3.2）；

（3.5）将客户端子线程完成图像数据的接收和转发的信号输出给主线程。

进一步地，客户端主线程与客户端子线程之间通过postMessage来传递信息，通过onmessage来接收信息；其中postMessage是worker的一个方法，用来发送一条消息到最近的外层对象；onmessage是woker的一个事件句柄，当有一条消息通过postMessage发出时，onmessage会被调用。

进一步地，在客户端子线程从服务器获取图像数据的过程中，如果出现问题，客户端子线程通过postMessage方法向主线程发送一个消息，该消息内容包括一个内容为“出错了”的type字段及错误信息；主线程通过type字段判断收到的是一个“出错了”的消息；客户端主线程取出错误信息并展示给用户，同时关闭客户端子线程，客户端子线程任务结束。

进一步地，步骤（4）通过事件循环机制实现，具体过程为：当客户端主线程接收到来自客户端子线程的图像数据片段时，异步地传递给医学研究图像渲染工具，所述医学研究图像渲染工具采用可视化组件papaya，异步传递过程作为宏任务，会被推入宏任务队列，当前执行栈会继续按顺序执行同步逻辑和当前微任务队列中的所有微任务，直到执行到当前宏任务才会真正地去传递图像数据，渲染磁共振3D图像。

本发明还提供了一种基于多线程的磁共振3D图像大数据量渲染系统，该系统包括客户端层、服务端层和数据库层；数据库层负责存储图像数据，图像数据使用NIfTI格式进行描述，并使用gzip对图像数据进行压缩，数据库层与服务端层交互，实现图像数据的存取和转发，客户端层包括子线程管理模块和图像渲染模块；

所述客户端层的子线程管理模块开辟一条客户端子线程，并负责与子线程进行通信，具体为：客户端层的子线程管理模块向客户端子线程发送获取磁共振3D图像数据的指令；所述客户端子线程向服务端层发送获取图像数据的请求，服务端层从数据库层获取磁共振3D图像的数据，并流式地响应给客户端子线程；所述客户端子线程将服务器层返回的图像数据流设定分段值后，将图像数据拆分成若干块，分段地转发给客户端层；所述客户端层的图像渲染模块采用医学研究图像渲染工具将接收到的磁共振3D图像数据渲染到浏览器页面上，展示给用户；待客户端子线程将所有图像数据转发完毕后，子线程管理模块关闭客户端子线程。

进一步地，所述客户端子线程接收服务端层返回的图像数据流之后，将图像数据存入缓存中；客户端子线程判断当前缓存是否为空；如果为空，则将客户端子线程完成图像数据的接收和转发的信号输出给客户端层的子线程管理模块；否则进一步判断当前缓存内图像数据大小是否不超过预设的分段值，如果是，则将缓存内数据全部取出；如果不是，则从缓存内截取分段值大小的图像数据，将从缓存中取出的数据输出给客户端层的子线程管理模块，然后客户端子线程继续判断当前缓存是否为空。

进一步地，客户端层的图像渲染模块通过事件循环机制实现，具体过程为：当客户端层的子线程管理模块接收到来自客户端子线程的图像数据片段时，异步地传递给医学研究图像渲染工具，所述医学研究图像渲染工具采用可视化组件papaya，异步传递过程作为宏任务，会被推入宏任务队列，当前执行栈会继续按顺序执行同步逻辑和当前微任务队列中的所有微任务，直到执行到当前宏任务才会真正地去传递图像数据，渲染磁共振3D图像。

本发明的有益效果：本发明使用经过gzip压缩的NIfTI格式文件（后缀.nii.gz）替代JSON文件，可极大减少描述图像信息的文件的大小；使用基于Canvas的可视化工具papaya替代SVG来绘制图像，可有效提高渲染效率和性能；客户端主线程开辟一条子线程来专门处理从服务器获取数据的逻辑，并异步地传递给可视化组件（papaya），使得后续程序不被阻塞，提高页面渲染速度，减少用户等待时间。本发明可以解决前端浏览器页面渲染大数据量的磁共振3D图像的问题，且具有较高性能。

附图说明

图1为本发明提供的系统及方法的架构图；

图2为本发明提供的方法的流程图；

图3为主线程管理子线程的方法示意图；

图4为子线程拆分数据流的流程图；

图5为主线程与子线程之间的通信示意图；

图6为浏览器中事件循环示意图；

图7为本发明方案实施的结果实例；

图8为本发明方案实施的支持展示描述信息的结果实例。

具体实施方式

以下结合附图对本发明具体实施方式作进一步详细说明。

如图1和图2所示，本发明提供的一种基于多线程的磁共振3D图像大数据量渲染方法及系统，本发明的架构包含客户端、服务端和数据库三层，此处客户端是web前端。数据库层负责存储图像数据，其中图像信息使用NIfTI格式进行描述，并使用gzip对图像文件进行压缩以减少文件大小；服务端层负责连通客户端和数据库，为客户端从数据库获取图像数据搭建桥梁；客户端层主线程实现子线程管理和papaya渲染，子线程管理具体为开辟子线程、并负责与子线程进行通信，papaya渲染具体为将获取到的图像数据渲染到浏览器页面上、展示给用户，papaya是一个开源的基于JavaScript开发的医学研究图像渲染工具，它的开源地址是：https://github.com/rii-mango/Papaya。本发明方法具体过程如下：

（1）用户从浏览器进入客户端主线程；且客户端主线程开辟一条客户端子线程，然后客户端主线程向客户端子线程发送开始获取磁共振3D图像数据的指令；

（2）客户端子线程向服务端发送获取图像数据的请求，服务端从数据库获取磁共振3D图像的数据，并流式地响应给客户端子线程；

（3）客户端子线程接收到服务器返回的图像数据流，设定分段值将图像数据拆分成若干块，分段地转发给客户端主线程；如图4所示，具体过程为：

（3.1）客户端子线程接收服务端返回的图像数据流之后，将图像数据存入缓存中；

（3.2）客户端子线程判断当前缓存是否为空；如果为空，则进入步骤（3.5）；否则进入步骤（3.3）；

（3.3）判断当前缓存内图像数据大小是否不超过预设的分段值，分段值大小可以选择为20K，如果是，则将缓存内数据全部取出；如果不是，则从缓存内截取分段值大小的图像数据；

（3.4）将从缓存中取出的数据输出给客户端主线程，并返回到步骤（3.2）。

（3.5）将客户端子线程完成图像数据的接收和转发的信号输出给主线程。

（4）客户端主线程将接收到的图像数据片段异步地传递给papaya，所述papaya将获取到的磁共振3D图像数据渲染到浏览器页面上；该步骤通过事件循环机制实现，如图6所示，具体过程为：JavaScript语言是单线程的，为了协调事件、用户交互、脚本、UI渲染和网络处理等行为，防止主线程阻塞，事件循环应运而生，事件循环的顺序决定了JavaScript代码的执行顺序。一个事件循环中可以有多个任务队列，任务队列又分为宏任务队列与微任务队列。主线程执行栈优先执行同步逻辑，异步逻辑被推入任务队列进行排队。事件循环总是在执行完执行栈中的同步逻辑和微任务队列中的所有微任务之后、才执行宏任务队列中的下一个宏任务。常见的宏任务有：setTimeout、setInterval、I/O操作、UI渲染等。常见的微任务有：Promise的回调、MutationObserver等。当客户端主线程接收到来自客户端子线程的图像数据片段时，异步地传递给papaya，此过程作为宏任务，会被推入宏任务队列，当前执行栈会继续按顺序执行同步逻辑和当前微任务队列中的所有微任务，直到执行到当前宏任务才会真正地去传递图像数据，渲染磁共振3D图像；事件循环机制可以让执行栈中的任务不被异步逻辑阻塞，保障用户与浏览器的顺畅交互。

（5）客户端子线程判断是否已经将所有图像数据转发给客户端主线程，如果没有，重复步骤（3）和步骤（4）；否则进入步骤（6）；

（6）客户端子线程通知客户端主线程已经完成所有图像数据的接收和转发，客户端主线程关闭客户端子线程，流程结束。

本发明中基于Web Worker来开辟子线程，Web Worker是HTML5标准的一部分，开辟子线程的具体代码如图3所示，客户端主线程通过 this.worker = new Worker(URL.createObjectURL(new Blob([(f.toString())()])))来开辟客户端子线程；WebWorker规定可以通过new Worker()来创建子线程，new Woker()需要指定一个URL入参；上述代码中的f是客户端子线程函数，处理客户端子线程接收和转发磁共振3D图像数据的逻辑；f.toString()将该函数字符串化、并作为参数传递给new Blob()；new Blob()创建一个Blob对象，Blob对象表示类文件对象；URL.createObjectURL()将Blob对象转换为一个对象URL，作为参数传递给new Worker()从而创建子线程；最后将创建出来的子线程赋值给this.worker变量；所述客户端主线程通过this.worker.terminate()来关闭客户端子线程；其中terminate是worker的一个方法，用来立即终止worker。

如图5所示，客户端主线程与客户端子线程之间通过postMessage来传递信息，通过onmessage来接收信息；其中postMessage是worker的一个方法，用来发送一条消息到最近的外层对象；onmessage是woker的一个事件句柄，当有一条消息通过postMessage发出时，onmessage会被调用。

主线程通过this.worker.postMessage()方法，给子线程发送一个message字段内容为“start”的消息；

子线程监听onmessage事件，当主线程向子线程发送消息时就会触发onmessage事件。子线程的onmessage事件被触发，通过message字段判断收到的是一个“start”指令。于是子线程开始向服务端发送获取磁共振3D图像数据的请求；

子线程与服务端建立连接后，服务端开始把从数据库读取的磁共振3D图像数据转换为流、流式地传输给子线程；

子线程根据预设的分段值将数据流分段，通过postMessage()方法向主线程发送消息，该消息内容包括：一个内容为“进行中”的type字段，一个内容为分段出来的数据片段的data字段；

主线程监听this.worker的onmessage事件，当子线程向主线程发送消息时就会触发this.worker.onmessage事件。主线程的this.worker.onmessage事件被触发，通过type字段判断收到的是一个“进行中”的消息。于是主线程取出data字段的内容（即磁共振3D图像数据片段）、传递给papaya进行渲染。

子线程的缓存变空了表示子线程完成了磁共振3D图像数据的接收和转发，此时子线程通过postMessage()方法向主线程发送消息，该消息内容包括：一个内容为“完成”的type字段，一个内容为剩余数据片段的data字段；

主线程的this.worker.onmessage事件被触发，通过type字段判断收到的是一个“完成”的消息。于是主线程取出data字段的内容（即最后的磁共振3D图像数据片段）、传递给papaya进行渲染。同时关闭子线程、子线程任务结束；

在客户端子线程从服务器获取图像数据的过程中，如果出现问题，客户端子线程会通过postMessage方法向主线程发送一个消息，该消息内容包括一个内容为“出错了”的type字段及错误信息；主线程通过type字段判断收到的是一个“出错了”的消息；客户端主线程取出错误信息并展示给用户，同时关闭客户端子线程，客户端子线程任务结束。

如图1所示，本发明还提供了一种基于多线程的磁共振3D图像大数据量渲染系统，该系统包括客户端层、服务端层和数据库层；数据库层负责存储图像数据，图像数据使用NIfTI格式进行描述，并使用gzip对图像数据进行压缩，数据库层与服务端层交互，实现图像数据的存取和转发，客户端层包括子线程管理模块和图像渲染模块；

所述客户端层的子线程管理模块开辟一条客户端子线程，并负责与子线程进行通信，具体为：客户端层的子线程管理模块向客户端子线程发送获取磁共振3D图像数据的指令；所述客户端子线程向服务端层发送获取图像数据的请求，服务端层从数据库层获取磁共振3D图像的数据，并流式地响应给客户端子线程；所述客户端子线程将服务器层返回的图像数据流设定分段值后，将图像数据拆分成若干块，分段地转发给客户端层；具体为：所述客户端子线程接收服务端层返回的图像数据流之后，将图像数据存入缓存中；客户端子线程判断当前缓存是否为空；如果为空，则将客户端子线程完成图像数据的接收和转发的信号输出给客户端层的子线程管理模块；否则进一步判断当前缓存内图像数据大小是否不超过预设的分段值，如果是，则将缓存内数据全部取出；如果不是，则从缓存内截取分段值大小的图像数据，将从缓存中取出的数据输出给客户端层的子线程管理模块，然后客户端子线程继续判断当前缓存是否为空。所述客户端层的图像渲染模块采用医学研究图像渲染工具将接收到的磁共振3D图像数据渲染到浏览器页面上，展示给用户，具体过程通过事件循环机制实现：当客户端层的子线程管理模块接收到来自客户端子线程的图像数据片段时，异步地传递给医学研究图像渲染工具，异步传递过程作为宏任务，会被推入宏任务队列，当前执行栈会继续按顺序执行同步逻辑和当前微任务队列中的所有微任务，直到执行到当前宏任务才会真正地去传递图像数据，渲染磁共振3D图像。所述医学研究图像渲染工具采用基于Canvas的可视化工具papaya；待客户端子线程将所有图像数据转发完毕后，子线程管理模块关闭客户端子线程。

如图7所示，是本发明的一个渲染实例。用户在浏览器中填写一些预设信息后，发起处理请求，触发主线程任务，主线程开辟子线程用来获取用户想要展示的磁共振3D图像的NIfTI格式图像数据，并分段地传递给主线程，主线程分段地将图像数据传递给papaya，最后papaya将该图像数据渲染生成磁共振3D图像。从图像上可以获取以下信息：某个像素点的位置（如图7所示的十字线条交叉点的位置为x=2.5、y=0、z=-12.5）、某个像素点的值（如图7所示的十字线条交叉点的值为0.51718875）。此外还可以对图像进行如下操作：点击Axial的+、-按钮，可以移动展示图像的横断位，即保持x、y轴不变，改变z的值；点击Coronal的+、-按钮，可以移动展示图像的冠状位，即保持x、z轴不变，改变y的；点击Sagittal的+、-按钮，可以移动展示图像的矢状位，即保持y、z不变，改变x的值；点击Swap View按钮，可以切换视角，即可以将冠状位、矢状位和横断位的图像进行交换位置操作；此外还可以通过改变十字线条交叉点的位置，从而查看任意像素点的信息。

本发明方案还支持展示像素点描述信息，如图8所示。同样的，用户在浏览器中填写一些预设信息后，发起处理请求，触发主线程任务，主线程开辟子线程用来获取用户想要展示的磁共振3D图像的NIfTI格式图像数据，并分段地传递给主线程，同时主线程还要开辟第二条子线程，用来获取描述磁共振3D图像像素点描述信息的csv文件，并分段地传递给主线程，主线程分段地将图像数据传递给papaya，最后papaya将该图像数据渲染生成磁共振3D图像。同时第二条子线程还可以用来获取描述磁共振3D图像颜色，展示彩色的像素点。

如图8所示的实例是一个磁共振3D图像，图中的十字线条交叉点的位置为x=89、y=131、z=128，值为0，描述信息为右脑的海马体Right-Hippocampus。

上述实施例用来解释说明本发明，而不是对本发明进行限制，在本发明的精神和权利要求的保护范围内，对本发明作出的任何修改和改变，都落入本发明的保护范围。