CN109284487A - 在canvas中渲染数据的方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明是关于一种在canvas中渲染数据的方法、装置、电子设备及存储介质。所述方法包括：在待处理文件中获取标记语言格式的待渲染数据；将所述标记语言格式的待渲染数据转换为可被图片生成工具识别的语言格式；将可被图片生成工具识别的语言格式的数据生成图片；将所述图片渲染在canvas中。本发明提供的方案可将标记语言格式的带渲染数据渲染在canvas中。

Description

在canvas中渲染数据的方法、装置、电子设备及存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种在canvas中渲染数据的方法、装置、电子设备及存储介质。

背景技术

数学公式的结构一般比较复杂，在不同的数据文件中以不同的格式显示。对于格式相同的数据文件，在将其中一个数据文件中的公式渲染到另外一个数据文件中时，可在一个数据文件中获取公式并直接渲染到另外一个数据文件中。例如XML和HTML的数据文件中的公式都是标记语言格式，可直接将XML数据文件中的公式直接渲染到HTML数据文件中。但对于canvas(画布)来说，其不能渲染标记语言格式的数据，因此无法将标记语言格式的公式渲染在canvas中。

发明内容

本发明提供了一种在canvas中渲染数据的方法、装置、电子设备及存储介质，以解决现有技术中存在的不足。

根据本发明实施例的第一方面，提供了一种在canvas中渲染数据的方法，其特征在于，所述方法包括：

在待处理文件中获取标记语言格式的待渲染数据；

将所述标记语言格式的待渲染数据转换为可被图片生成工具识别的语言格式；

将可被图片生成工具识别的语言格式的数据生成图片；

将所述图片渲染在canvas中。

在一个可选的实现方式中，所述待渲染数据包括公式数据。

在一个可选的实现方式中，在所述在待处理的数据文件中获取标记语言格式的数据之后，所述方法还包括：

对所述公式数据进行数据清洗，所述数据清洗包括：将所述公式数据包含的格式异常的符号进行格式转换；和/或，

对所述公式数据进行修正，所述修正包括：将所述公式数据中位置错乱的字符的位置修正。

在一个可选的实现方式中，所述在待处理的数据文件中获取标记语言格式的数据，包括：

在所述待处理的数据文件中查找所述公式数据的头标签和尾标签；

获取头标签数据和尾标签数据。

在一个可选的实现方式中，述可被图片生成工具识别的语言格式包括SVG语言格式。

在一个可选的实现方式中，所述将所述图片渲染在canvas中，包括：

获取坐标参数，根据所述坐标参数在canvas中确定目标图像区域；

将所述图片渲染在所述目标图像区域。

在一个可选的实现方式中，在所述将所述图片渲染在所述目标图像区域之前，所述方法还包括：

对所述图片进行缩放，缩放后的图片大小与所述目标图像区域的大小匹配。

根据本发明实施例的第二方面，提供了一种在canvas中渲染数据的装置，其特征在于，所述装置包括：

数据获取模块，用于在待处理的数据文件中获取标记语言格式的数据；

格式转换模块，用于将所述标记语言格式的数据转换为可被图片生成工具识别的语言格式；

图片生成模块，用于采用所述图片生成工具将可被图片生成工具识别的语言格式的数据生成图片，所述图片显示所述数据的信息；

图片渲染模块，用于将所述图片渲染在canvas中。

根据本发明实施例的第三方面，提供了一种电子设备，其特征在于，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中，所述处理器执行所述程序时实现如下方法：

在待处理的数据文件中获取标记语言格式的数据；

将所述标记语言格式的数据转换为可被图片生成工具识别的语言格式；

采用所述图片生成工具将可被图片生成工具识别的语言格式的数据生成图片，所述图片显示所述数据的信息；

将所述图片渲染在canvas中。

根据本发明实施例的第四方面，提供了一种计算机存储介质，其特征在于，其上存储有计算机程序，该程序被处理器执行时实现如下方法：

在待处理的数据文件中获取标记语言格式的数据；

将所述标记语言格式的数据转换为可被图片生成工具识别的语言格式；

采用所述图片生成工具将可被图片生成工具识别的语言格式的数据生成图片，所述图片显示所述数据的信息；

将所述图片渲染在canvas中。

本发明的实施例提供的技术方案可以包括以下有益效果：

本发明实施例提供一种在canvas中渲染数据的方法、装置、电子设备及存储介质。本发明实施例中，在待处理文件中获取到标记语言格式的待渲染数据后，将标记语言格式的待渲染数据转换为可被图片生成工具识别的语言格式，从而将可被图片生成工具识别的语言格式的数据生成图片，进而将图片渲染到canvas中。本发明实施例提供的方案可解决在canvas中无法渲染标记语言格式的数据的问题，可满足用户在canvas中中渲染标记语言格式的数据的需求。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。

图1A为本发明根据一示例性实施例示出的一种在canvas中渲染数据的方法的流程图；

图1B为本发明根据一示例性实施例示出的另一种在canvas中渲染数据的方法的流程图；

图1C为本发明根据一示例性实施例示出的再一种在canvas中渲染数据的方法的流程图；

图1D为本发明根据一示例性实施例示出的再一种在canvas中渲染数据的方法的流程图；

图2为本发明根据一示例性实施例示出的再一种在canvas中渲染数据的方法的流程图；

图3为本发明根据一示例性实施例示出的在canvas中渲染数据的装置的框图；

图4为本发明根据一示例性实施例示出的一种在canvas中渲染数据的装置所在电子设备的一种硬件结构图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。

在本发明使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本发明可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本发明范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

数学公式的结构一般比较复杂，在不同的数据文件中以不同的格式进行显示。对于公式数据显示格式相同的数据文件，在将其中一个数据文件中的公式渲染到另外一个数据文件中时，可在一个数据文件中获取公式直接渲染到另外一个数据文件中。例如，从XML数据文件中获取的公式数据是MathML语言格式，HTML数据文件中公式的格式也是MathML语言格式，因此可直接将从XML数据文件中获取的公式渲染到HTML数据文件中。但是对于canvas来说，其不能渲染记语言格式的数据，无法将标记语言格式的公式渲染到canvas中，给用户带来了不便。

鉴于此，本发明实施例提供一种在canvas中渲染数据的方法，在待处理文件中获取到标记语言格式的待渲染数据后，将标记语言格式的待渲染数据转换为可被图片生成工具识别的语言格式，从而将可被图片生成工具识别的语言格式的数据生成图片，并将图片渲染到canvas中。本发明实施例提供的方案可解决在canvas中无法渲染标记语言格式的数据的问题，满足了用户在canvas中中渲染标记语言格式的数据的需求，有助于提升用户的体验。

接下来对本发明方案进行示例说明。

本发明实施例提供的在canvas中渲染数据的方法可用于计算机设备或其他电子设别中。

如图1A所示，图1A是本发明根据一示例性实施例示出的一种在canvas中渲染数据的方法的流程图，该方法可以包括以下步骤110至步骤140：

在步骤110中，在待处理文件中获取标记语言格式的待渲染数据。

在步骤120中，将所述标记语言格式的待渲染数据转换为可被图片生成工具识别的语言格式。

在步骤130中，将可被图片生成工具识别的语言格式的数据生成图片。

在步骤140中，将所述图片渲染在canvas中。

本发明实施例中，待处理文件是包含标记语言格式的数据的文件，标记语言格式的数据即为待渲染数据。采用本发明实施例提供的方法可将待处理文件中的标记语言格式的数据渲染到canvas中。

其中，标记语言格式的带渲染数据的呈现形式可有多种，例如可以是公式数据。标记语言可以是MathML语言、latex语言等。待处理文件可以是XML文件、HTML文件等。在XML文件、HTML文件中公式数据的格式为MathML语言格式。

在本发明实施例中，需要获取标记语言格式的公式数据时，计算机或其他电子设备读取待处理文件并识别待处理文件中的数据，从而获取标记语言格式的数据。

在本发明实施例中，标记语言格式的公式数据的来源不同，可能导致获取到的标记语言格式的公式数据存在一些错误及与标准的标记语言格式不一致的地方，进而影响后续在canvas中渲染数据的准确性。为了保证获取到的数据的质量，确保获取到的公式数据为标准的标记语言格式，在所述在待处理的数据文件中获取标记语言格式的数据的步骤110之后，本发明实施例提供的方法还包括如下步骤：

对所述公式数据进行数据清洗，和/或，对所述公式数据进行修正。

其中，对公式数据进行数据清洗包括：将获取到的公式数据包含的格式异常的符号进行格式转换。对公式数据进行修正包括：将获取到的公式数据中位置错乱的字符的位置修正。

公式数据包含的符号主要指括号以及各种运算符号，从待处理文件中获取到的符号可能是十六进制表示的符号，不是标准的MathML语言格式，需要对该符号进行格式转换，转换为MathML语言格式。此外，公式数据中可能存在上下标字符，从待处理文件中获取到的公式数据中的上下标可能存在位置错乱，需要对位置错乱的字符的位置进行修正。

通过对公式数据进行数据清洗和修正，可纠正公式数据中可识别的错误，提高公式数据的质量，进而保证后续在canvas中渲染的数据的质量。

在一个实施例中，可被图片生成工具识别的语言格式包括SVG语言格式。对应地，图片生成工具指的是将SVG语言格式的数据生成图片的工具。具体地，获取的公式数据转换为SVG语言格式后，生成SVG语言格式的文件，将SVG语言格式的文件输入到图片生成工具中，可生成为图片。本发明实施例并不对图片生成工具进行限定，只要具有将SVG语言格式或其他可被识别的数据格式的公式数据转换为图片的功能即可。

将从XML文件获取的MathML语言格式的公式数据进行数据清洗和锈病，并转换为SVG语言格式的过程，可采用mathjax-node工具完成，具体可通过如下代码来实现：

在一个实施例中，如图1B所示，所述在待处理的数据文件中获取标记语言格式的数据的步骤110，可包括如下步骤111至步骤112：

在步骤111中，在所述待处理的数据文件中查找所述公式数据的头标签和尾标签。

在步骤112中，获取头标签数据和尾标签数据。

例如，XML文件中的标记语言格式的公式数据如下：

MathML：<math><mo>+</mo></math>

其中，公式数据的头标签为<math>，尾标签为</math>。在待处理的文件中查找到公式数据的头标签<math>和尾标签</math>后，获取头标签<math>和尾标签</math>对应的数据，即为公式数据。

在一个实施例中，当可被图片生成工具识别的语言格式包括SVG语言格式时，所述将可被图片生成工具识别的语言格式的数据生成图片的步骤130可通过如下代码来实现：

img.src＝svg

在一个实施例中，所述将所述图片渲染在canvas中的步骤140可通过如下代码来实现：

var c＝document.getElementById(‘canvas’)；

var ctx＝c.getContext("2d")；

var img＝document.getElementById("tulip")；

ctx.drawImage(img,10,10)；

在一个实施例中，参见图1C，将所述图片渲染在canvas中的步骤140，可包括如下步骤141至步骤142：

在步骤141中，获取坐标参数，根据所述坐标参数在canvas中确定目标图像区域。

在步骤142中，将所述图片渲染在所述目标图像区域。

在一个示例性实施例中，坐标参数包括矩形的四个顶点的坐标值，根据四个顶点的坐标在canvas中确定出矩形的目标图像区域。在另一个示例性实施例中，坐标参数包括圆形的圆心的坐标和直径大小，根据圆形的圆心的坐标和直径大小在canvas中确定出圆形的目标图像区域。

在一个示例性实施例中，坐标参数可以是与存储的坐标参数。在另一个实施例中，坐标参数可以是用户向计算机设备或其他电子设备输入的坐标参数。

在一个示例性实施例中，坐标参数可以包括图片边缘距canvas边缘的距离值，比如坐标参数包括图片右侧边缘与canvas的右侧边缘之间的距离值、图片左侧边缘与canvas的左侧边缘之间的距离值、图片上侧边缘与canvas的上侧边缘之间的距离值以及图片下侧边缘与canvas的下侧边缘之间的距离值。根据上述四个坐标参数在canvas中可确定出目标图像区域。

上述仅是列举的例子，配置指令携带的坐标参数并不限于此。在其他实施例中，配置指令携带的坐标参数可以不同于上述例子。

在一个实施例中，参见图1D，在将所述图片渲染在所述目标图像区域的步骤142，可包括如下步骤1421和步骤1422：

在步骤1421中，对所述图片进行缩放，缩放后的图片大小与所述目标图像区域的大小匹配。

在步骤1422中，将缩放后的图片渲染在所述目标图像区域。

在一个示例性实施例中，根据可被图片生成工具识别的语言格式的数据生成的图片为矩形的图片，在canvas中确定的目标图像区域也为矩形区域，则将矩形的图片的大小调整至与矩形的目标图像区域相同。

在一个示例性实施例中，根据可被图片生成工具识别的语言格式的数据生成的图片为圆形的图片，在canvas中确定的目标图像区域也为圆形区域，则将圆形的图片的大小调整至与圆形的目标图像区域相同。

在一个示例性实施例中，根据可被图片生成工具识别的语言格式的数据生成的图片为不规则的图片，在canvas中确定的目标图像区域为矩形区域，则将生成的图片调整为与矩形的目标图像区域匹配。具体地，将图片的最左侧与目标图像区域的左侧边缘对齐，将图片的最右侧与目标图像区域的右侧边缘对齐，将图片的最上侧与目标图像区域的上侧边缘对齐，将图片的最下侧与目标图像区域的下侧边缘对齐。

以上实施方式中的各种技术特征可以任意进行组合，只要特征之间的组合不存在冲突或矛盾，但是限于篇幅，未进行一一描述，因此上述实施方式中的各种技术特征的任意进行组合也属于本说明书公开的范围。

以下列举其中一种组合进行示例说明。

如图2所示，图2是本发明根据一示例性实施例示出的在canvas中渲染数据的方法的流程图，该方法可以包括以下步骤310至步骤360：

在步骤310中，在待处理文件中获取标记语言格式的待渲染数据，所述待渲染数据包括公式数据。

在本发明实施例中，待处理文件是包含标记语言格式的数据的文件，标记语言格式的数据即为待渲染数据。

其中，公式数据的格式可以是MathML语言格式或者latex语言格式等。待处理文件可以是XML文件、HTML文件等。

具体地，在待处理文件中获取标记语言格式的待渲染公式数据可通过如下过程实现：

在所述待处理的数据文件中查找所述公式数据的头标签和尾标签；在获取头标签数据和尾标签数据。

在步骤320中，对所述公式数据进行数据清洗，所述数据清洗包括：将所述公式数据包含的格式异常的符号进行格式转换；和/或，对所述公式数据进行修正，所述修正包括：将所述公式数据中位置错乱的字符的位置进行修正。

公式数据包含的符号主要指括号以及各种运算符号，从待处理文件中获取到的符号可能是十六进制表示的符号，不是标准的MathML语言格式，需要对该符号进行格式转换，转换为MathML语言格式。此外，公式数据中可能存在上下标字符，从待处理文件中获取到的公式数据中的上下标可能出现了位置错乱，需要对这些位置错乱的字符的位置进行修正。

通过对公式数据进行数据清洗和修正，可纠正公式数据中可识别的错误，提高公式数据的质量，进而保证后续在canvas中渲染的数据的质量。对应地，图片生成工具指的是将SVG语言格式的数据生成图片的工具。具体地，获取的公式数据转换为SVG语言格式后，生成SVG语言格式的文件，将SVG语言格式的文件输入到图片生成工具中，可生成为图片。

在步骤330中，将可被图片生成工具识别的语言格式的数据生成图片。

在一个实施例中，可被图片生成工具识别的语言格式包括SVG语言格式。对应地，图片生成工具指的是将SVG语言格式的数据生成图片的工具。具体地，获取的公式数据转换为SVG语言格式后，生成SVG语言格式的文件，将SVG语言格式的文件输入到图片生成工具中，可生成为图片。

在步骤340中，获取坐标参数，根据所述坐标参数在canvas中确定目标图像区域。

在一个实施例中，坐标参数可以是预先存储的参数，也可以是用户输入的坐标参数，例如计算机设备或其他电子设备可获取用户的参数配置指令，所述配置指令携带坐标参数。

在步骤350中，对所述图片进行缩放，缩放后的图片大小与所述目标图像区域的大小匹配。

本发明实施例不对图片的形状以及目标图像区域的形状进行限定。

在步骤360中，将所述图片渲染在所述目标图像区域。

本发明实施例提供的在canvas中渲染数据的方法，在待处理文件中获取到标记语言格式的待渲染数据后，将标记语言格式的待渲染数据转换为可被图片生成工具识别的语言格式，从而将可被图片生成工具识别的语言格式的数据生成图片，进而将图片渲染到canvas中。本发明实施例提供的方案可解决在canvas中无法渲染标记语言格式的数据的问题，可满足用户在canvas中中渲染标记语言格式的数据的需求。

与前述在canvas中渲染数据的方法的实施例相对应，本发明还提供了一种在canvas中渲染数据的装置及其所应用的电子设备、以及计算机存储介质的实施例。

如图3所示，图3是本发明根据一示例性实施例示出的一种在canvas中渲染数据的装置的框图，所述装置包括：

数据获取模块310，用于在待处理的数据文件中获取标记语言格式的数据；

格式转换模块320，用于将所述标记语言格式的数据转换为可被图片生成工具识别的语言格式；

图片生成模块330，用于采用所述图片生成工具将可被图片生成工具识别的语言格式的数据生成图片，所述图片显示所述数据的信息；

图片渲染模块340，用于将所述图片渲染在canvas中。

在一个可选的实现方式中，所述待渲染数据包括公式数据。

在一个可选的实现方式中，所述装置还包括数据处理模块，用于在所述在待处理的数据文件中获取标记语言格式的数据之后，

对所述公式数据进行数据清洗，所述数据清洗包括：将所述公式数据包含的格式异常的符号进行格式转换；和/或，

对所述公式数据进行修正，所述修正包括：将所述公式数据中位置错乱的字符的位置修正。

在一个可选的实现方式中，所述数据获取模块310包括：

标签获取单元，用于在所述待处理的数据文件中查找所述公式数据的头标签和尾标签；

数据获取单元，用于获取头标签数据和尾标签数据。

在一个可选的实现方式中，所述可被图片生成工具识别的语言格式包括SVG语言格式。

在一个可选的实现方式中，所述图片渲染模块340包括：

坐标参数获取单元，用于获取坐标参数，根据所述坐标参数在canvas中确定目标图像区域；

图片渲染单元，用于将所述图片渲染在所述目标图像区域。

在一个可选的实现方式中，所述图片渲染模块340还包括缩放单元，所述缩放单元用于在所述图片渲染单元将所述图片渲染在所述目标图像区域之前，对所述图片进行缩放，缩放后的图片大小与所述目标图像区域的大小匹配。

上述装置中各个模块的功能和作用的实现过程具体详情见上述方法中对应步骤的实现过程，在此不再赘述。

本发明实施例提供的在canvas中渲染数据的装置，在待处理文件中获取到标记语言格式的待渲染数据后，将标记语言格式的待渲染数据转换为可被图片生成工具识别的语言格式，从而将可被图片生成工具识别的语言格式的数据生成图片，进而将图片渲染到canvas中。本发明实施例提供的方案可解决在canvas中无法渲染标记语言格式的数据的问题，可满足用户在canvas中中渲染标记语言格式的数据的需求。

对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本发明方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

相应的，本发明实施例还提供了一种电子设备。所述电子设备包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中，所述处理器执行所述程序时实现如下方法：

在待处理的数据文件中获取标记语言格式的数据；

将所述标记语言格式的数据转换为可被图片生成工具识别的语言格式；

采用所述图片生成工具将可被图片生成工具识别的语言格式的数据生成图片，所述图片显示所述数据的信息；

将所述图片渲染在canvas中。

相应的，本发明实施例还提供了一种计算机存储介质。所述计算机存储介质上存储有计算机程序，该程序被处理器执行时实现如下方法：

在待处理的数据文件中获取标记语言格式的数据；

将所述标记语言格式的数据转换为可被图片生成工具识别的语言格式；

采用所述图片生成工具将可被图片生成工具识别的语言格式的数据生成图片，所述图片显示所述数据的信息；

将所述图片渲染在canvas中。

本发明可采用在一个或多个其中包含有程序代码的存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。计算机可用存储介质包括永久性和非永久性、可移动和非可移动媒体，可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括但不限于：相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。

本发明提供的在canvas中渲染数据的装置可以应用在电子设备上。装置实施例可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。以软件实现为例，作为一个逻辑意义上的装置，是通过其所在电子设备的处理器将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的。从硬件层面而言，如图4所示，图4是本发明根据一示例性实施例示出的在canvas中渲染数据的装置432所在电子设备的一种硬件结构图，除了图4所示的处理器410、内存430、网络接口420、以及非易失性存储器440之外，实施例中装置432所在的电子设备通常根据该电子设备的实际功能，还可以包括其他硬件，对此不再赘述。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本发明的其它实施方案。本发明旨在涵盖本发明的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本发明的一般性原理并包括本发明未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本发明的真正范围和精神由下面的权利要求指出。

应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本发明的范围仅由所附的权利要求来限制。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims (10)

1.一种在canvas中渲染数据的方法，其特征在于，所述方法包括：

在待处理文件中获取标记语言格式的待渲染数据；

将所述标记语言格式的待渲染数据转换为可被图片生成工具识别的语言格式；

将可被图片生成工具识别的语言格式的数据生成图片；

将所述图片渲染在canvas中。

2.根据权利要求1所述的在canvas中渲染数据的方法，其特征在于，所述待渲染数据包括公式数据。

3.根据权利要求2所述的在canvas中渲染数据的方法，其特征在于，在所述在待处理的数据文件中获取标记语言格式的数据之后，所述方法还包括：

对所述公式数据进行数据清洗，所述数据清洗包括：将所述公式数据包含的格式异常的符号进行格式转换；和/或，

对所述公式数据进行修正，所述修正包括：将所述公式数据中位置错乱的字符的位置进行修正。

4.根据权利要求2所述的在canvas中渲染数据的方法，其特征在于，所述在待处理的数据文件中获取标记语言格式的数据，包括：

在所述待处理的数据文件中查找所述公式数据的头标签和尾标签；

获取头标签数据和尾标签数据。

5.根据权利要求1所述的在canvas中渲染数据的方法，其特征在于，所述可被图片生成工具识别的语言格式包括SVG语言格式。

6.根据权利要求1所述的在canvas中渲染数据的方法，其特征在于，所述将所述图片渲染在canvas中，包括：

获取坐标参数，根据所述坐标参数在canvas中确定目标图像区域；

将所述图片渲染在所述目标图像区域。

7.根据权利要求6所述的在canvas中渲染数据的方法，其特征在于，在所述将所述图片渲染在所述目标图像区域之前，所述方法还包括：

对所述图片进行缩放，缩放后的图片大小与所述目标图像区域的大小匹配。

8.一种在canvas中渲染数据的装置，其特征在于，所述装置包括：

数据获取模块，用于在待处理的数据文件中获取标记语言格式的数据；

格式转换模块，用于将所述标记语言格式的数据转换为可被图片生成工具识别的语言格式；

图片生成模块，用于采用所述图片生成工具将可被图片生成工具识别的语言格式的数据生成图片，所述图片显示所述数据的信息；

图片渲染模块，用于将所述图片渲染在canvas中。

9.一种电子设备，其特征在于，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中，所述处理器执行所述程序时实现如下方法：

在待处理的数据文件中获取标记语言格式的数据；

将所述标记语言格式的数据转换为可被图片生成工具识别的语言格式；

采用所述图片生成工具将可被图片生成工具识别的语言格式的数据生成图片，所述图片显示所述数据的信息；

将所述图片渲染在canvas中。

10.一种计算机存储介质，其特征在于，其上存储有计算机程序，该程序被处理器执行时实现如下方法：

在待处理的数据文件中获取标记语言格式的数据；

将所述标记语言格式的数据转换为可被图片生成工具识别的语言格式；

采用所述图片生成工具将可被图片生成工具识别的语言格式的数据生成图片，所述图片显示所述数据的信息；

将所述图片渲染在canvas中。