CN111127594A - Svg图形的导出方法及导出系统 - Google Patents

Svg图形的导出方法及导出系统 Download PDF

Info

Publication number
CN111127594A
CN111127594A CN201811287032.9A CN201811287032A CN111127594A CN 111127594 A CN111127594 A CN 111127594A CN 201811287032 A CN201811287032 A CN 201811287032A CN 111127594 A CN111127594 A CN 111127594A
Authority
CN
China
Prior art keywords
svg
graph
cloned
canvas
exporting
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201811287032.9A
Other languages
English (en)
Inventor
卢林
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Gridsum Technology Co Ltd
Original Assignee
Beijing Gridsum Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Gridsum Technology Co Ltd filed Critical Beijing Gridsum Technology Co Ltd
Priority to CN201811287032.9A priority Critical patent/CN111127594A/zh
Publication of CN111127594A publication Critical patent/CN111127594A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/002D [Two Dimensional] image generation
    • G06T11/60Editing figures and text; Combining figures or text

Landscapes

  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

本发明涉及图形处理领域,公开了一种SVG图形的导出方法及导出系统。该导出方法包括:获取所述SVG图形;克隆所述SVG图形;克隆的SVG图形置于Canvas画布中,所述Canvas画布的可显示区域大于所述SVG图形的尺寸;调整所述克隆的SVG图形的位置,以使所述克隆的SVG图形位于所述Canvas画布的可显示区域内;以及将所述Canvas画布中的所述克隆的SVG图形导出,以得到完整图形。本发明可支持SVG图形的位置移动和完整导出。

Description

SVG图形的导出方法及导出系统
技术领域
本发明涉及图形处理领域,具体地涉及一种SVG图形的导出方法及导出系统。
背景技术
对于SVG图形的导出方案,一般情况下前端技术是采用转换成image/svg+xml格式或者直接使用canvg类库的方案。
本申请发明人在实现本发明的过程中发现,现有技术的上述方案具有不支持SVG图形的位置移动和完整导出等操作的缺陷。
发明内容
本发明实施例的目的是提供一种SVG图形的导出方法及导出系统,其可支持SVG图形的位置移动和完整导出。
为了实现上述目的,本发明一方面提供一种SVG图形的导出方法,该导出方法包括:获取所述SVG图形;克隆所述SVG图形;克隆的SVG图形置于Canvas画布中,所述Canvas画布的可显示区域大于所述SVG图形的尺寸;调整所述克隆的SVG图形的位置,以使所述克隆的SVG图形位于所述Canvas画布的可显示区域内;以及将所述Canvas画布中的所述克隆的SVG图形导出,以得到完整图形。
可选的,在获取SVG图形后,所述方法还包括:判断所述SVG图形的尺寸是否大于显示屏尺寸;以及如果是,则确定直接导出所述SVG图形所得到的为非完整图形,并转入执行克隆所述SVG图形的步骤。
可选的,在将所述Canvas画布中的所述克隆的SVG图形导出前,所述方法还包括:检查所述克隆的SVG图形中是否包含引用的外部图片;以及如果是,则将所述引用的外部图片进行删除,以便所述克隆的SVG图形能够无阻塞导出。
可选的,所述Canvas画布的可显示区域的起始边界的位置确定,且沿所述起始边界无限延展,所述调整所述克隆的SVG图形的位置,以使所述克隆的SVG图形位于所述Canvas画布的可显示区域内包括:确定所述Canvas画布的起始边界的位置;以及将所述克隆的SVG图形的位置调整为一端与所述起始边界的位置对齐,另一端位于无限延展的所述Canvas画布的可显示区域内。
可选的,在将所述Canvas画布中的所述克隆的SVG图形导出前,所述方法还包括:确定需要导出的目标图形格式,所述目标图形格式至少包括:PNG和JPEG中的至少一种;所述将所述Canvas画布中的所述克隆的SVG图形导出,包括:调用Canvg库的接口,将克隆的所述SVG图形转换为Canvas图形;以及调用浏览器接口,将所述Canvas图形转换为所述目标图形格式的图形,并导出所述目标图形格式的图形。
可选的,在将所述Canvas画布中的所述克隆的SVG图形导出后,所述方法还包括:获取导出的目标图形格式的图形的尺寸和显示屏的尺寸;根据所述目标图形格式的图形的尺寸和所述显示屏的尺寸,确定缩放比;以及根据所述缩放比,对所述目标图形格式的图形进行放大或者缩小,以使所述目标图形格式的图形在所述显示屏中进行完全显示。
相应地,本发明另一方面还提供一种SVG图形的导出系统,所述系统包括:图形获取模块,用于获取所述SVG图形;克隆模块,用于克隆所述SVG图形;放置模块,用于将克隆的SVG图形置于Canvas画布中,所述Canvas画布的可显示区域大于所述SVG图形的尺寸;位置调整模块,用于调整所述克隆的SVG图形的位置,以使所述克隆的SVG图形位于所述Canvas画布的可显示区域内;以及导出模块,用于将所述Canvas画布中的所述克隆的SVG图形导出,以得到完整图形。
可选的,所述系统还包括:判断模块,用于判断所获取的所述SVG图形的尺寸是否大于显示屏尺寸;以及非完整图形确定模块,用于在所述判断模块判断出所获取的所述SVG图形的尺寸大于所述显示屏尺寸的情况下,则确定直接导出所述SVG图形所得到的为非完整图形。
可选的,所述系统还包括:检查模块,用于检查所述克隆的SVG图形中是否包含引用的外部图片;以及删除模块,用于在所述检查模块检查出所述克隆的SVG图形中包含引用的外部图片的情况下,将所述引用的外部图片进行删除,以便所克隆的SVG图形能够无阻塞导出。
可选的,所述Canvas画布的可显示区域的起始边界的位置确定,且沿所述起始边界无限延展,所述位置调整模块还包括:起始边界确定模块,用于确定所述Canvas画布的起始边界的位置;以及位置对齐模块,用于将所述克隆的SVG图形的位置调整为一端与所述起始边界的位置对齐,另一端位于无限延展的所述Canvas画布的可显示区域内。
可选的,所述系统还包括:格式确定模块,用于确定需要导出的目标图形格式,所述目标图形格式至少包括:PNG和JPEG中的至少一种,所述导出模块包括:Canvas图形转换模块,用于调用Canvg库的接口,将克隆的所述SVG图形转换为Canvas图形;以及目标图形转换模块,用于调用浏览器接口,将所述Canvas图形转换为所述目标图形格式的图形,并导出所述目标图形格式的图形。
相应地,本发明又一方面还提供一种机器可读存储介质,该机器可读存储介质上存储有指令,该指令用于使得机器执行上述的SVG图形的导出方法。
相应地,本发明又一方面还提供一种处理器,该处理器用于运行程序,其中,所述程序被运行时用于执行上述的SVG图形的导出方法。
通过上述技术方案,本发明创造性地通过克隆手段获得所克隆的SVG图形,从而可支持所克隆的SVG图形的位置移动,将其置于Canvas画布中,再由于所述Canvas画布的可显示区域大于该SVG图形的尺寸,故通过调整所克隆的SVG图形的位置将其置于Canvas画布的可显示区域,进而可实现SVG图形的完整导出。
本发明实施例的其它特征和优点将在随后的具体实施方式部分予以详细说明。
附图说明
附图是用来提供对本发明实施例的进一步理解,并且构成说明书的一部分,与下面的具体实施方式一起用于解释本发明实施例,但并不构成对本发明实施例的限制。在附图中:
图1是本发明一种实施方式提供的SVG图形的导出方法的流程图;
图2是本发明一种实施方式提供的SVG图形的导出方法的流程图;以及
图3是本发明一种实施方式提供的SVG图形的导出方法的结构图。
附图标记说明
30 图形获取模块 31 克隆模块
32 放置模块 33 位置调整模块
34 导出模块
具体实施方式
以下结合附图对本发明实施例的具体实施方式进行详细说明。应当理解的是,此处所描述的具体实施方式仅用于说明和解释本发明实施例,并不用于限制本发明实施例。
在利用canvg类库导出网页中的SVG图形时,往往隐藏在Canvas画布的起始边界的左侧及上侧的SVG图形不能被导出,以致整个SVG图形不能被完整地被导出。该现象是由canvg类库的识别算法决定的,具体地,Canvas画布在识别SVG图形的过程中,从位于Canvas画布的起始边界的位置处的SVG图形的元素开始,以预设宽度的行向右无限延展的进行,直到位于此行的SVG图形的最右端结束,依次地,再从位于可显示区域的左端位置且未被识别的SVG图形的元素开始,以所述预设宽度的行向右无限延展的进行,直到位于此行的SVG图形的最右端结束,以同样的方式逐行向下无限延展的进行,直至所述SVG图形的右下端的元素为止。
图1是本发明一实施例提供的SVG图形的导出方法的流程图。如图1所示,本发明提供的SVG图形的导出方法可包括:步骤S101,获取所述SVG图形;步骤S102,克隆所述SVG图形;步骤S103,将克隆的SVG图形置于Canvas画布中,所述Canvas画布的可显示区域大于所述SVG图形的尺寸;步骤S104,调整所述克隆的SVG图形的位置,以使所述克隆的SVG图形位于所述Canvas画布的可显示区域内;以及步骤S105,将所述Canvas画布中的所述克隆的SVG图形导出,以得到完整图形。该导出方法可通过克隆手段获得所克隆的SVG图形,从而可支持所克隆的SVG图形的位置移动,将其置于Canvas画布中,再由于所述Canvas画布的可显示区域大于该SVG图形的尺寸,故通过调整所克隆的SVG图形的位置将其置于Canvas画布的可显示区域,进而可实现SVG图形的完整导出。
在执行步骤S101之后,需要判断所述SVG图形的尺寸是否大于显示屏尺寸;以及如果是,则确定直接导出所述SVG图形所得到的为非完整图形,并转入步骤S102;如果不是,则确定直接导出所述SVG图形所得到的为完整图形,并直接按照现有技术中的方式(具体细节不再在此赘述)将所述SVG图形导出即可。
所述Canvas画布的可显示区域的起始边界的位置确定,且沿所述起始边界无限延展。在这种前提下,步骤S104中的调整所述克隆的SVG图形的位置,以使所述克隆的SVG图形位于所述Canvas画布的可显示区域内可包括如下步骤:确定所述Canvas画布的起始边界的位置;以及将所述克隆的SVG图形的位置调整为一端与所述起始边界的位置对齐,另一端位于无限延展的所述Canvas画布的可显示区域内。例如,所述Canvas画布的可显示区域的起始边界的位置为可显示区域的左端和上端,该步骤S104可保证所述克隆的SVG图形的左上角与所述Canvas画布的左上角的位置相对齐,从而可使该Canvas画布从位于所述克隆的SVG图形的左上角的元素开始识别,向右无限延展及向下无限延展进行识别,直至识别到位于所述克隆的SVG图形的右下角的元素为止,进而可将该克隆的SVG图形完整地导出。
若所述SVG图形中存在外部图片,则在导出该SVG图形的过程中,一旦遇到所述外部图片,该SVG图形的导出就会被阻塞,即外部图片会阻塞该SVG图形的导出。由此,本发明提供的SVG图形的导出方法还可包括:在执行步骤S105之前,检查所述克隆的SVG图形中是否包含引用的外部图片;以及如果是,则将所述引用的外部图片进行删除,以便所述克隆的SVG图形能够无阻塞导出;如果不是,则直接按照现有技术中的方式(具体细节不再在此赘述)将所述SVG图形导出即可。由于所述外部图片可通过image标签所指向的地址内嵌到所述SVG图形中,故所述检查所述克隆的SVG图形中是否包含引用的外部图片可包括:检查所述克隆的SVG图形中是否包含image标签。在删除所述的外部图片之后,导出所述克隆的SVG图形的过程不会被阻塞,从而可实现所述SVG图形的完整导出。注意:事实上,在删除所述外部图片之后,虽然导出所述克隆的SVG图形的过程不会被阻塞,但所导出的SVG图形为所述克隆的SVG图形的主要图形(不包括外部图片),而该外部图片的缺失完全不影响对整个SVG图形所呈现的信息的理解。例如,若SVG图形为一篇文章,而外部图片则为标记每一小节前的图形标记(如实心圆点、空心菱形或空心正方形等图形标记)。
在执行步骤S105之前,本发明所提供的所述导出方法还可包括:确定需要导出的目标图形格式,所述目标图形格式至少包括:PNG和JPEG中的至少一种。在确定需要导出的目标图形格式的前提下,步骤S105中的所述将所述Canvas画布中的所述克隆的SVG图形导出可包括如下步骤:调用Canvg库的接口,将克隆的所述SVG图形转换为Canvas图形;以及调用浏览器接口,将所述Canvas图形转换为所述目标图形格式的图形,并导出所述目标图形格式的图形。其中,所述浏览器接口可为应用程序接口(API)。
在执行步骤S105之后,为了将导出的目标图形格式的图形完整地显示在显示屏中,本发明提供的所述导出方法还可包括:获取导出的目标图形格式的图形的尺寸和显示屏的尺寸;根据所述目标图形格式的图形的尺寸和所述显示屏的尺寸,确定缩放比;以及根据所述缩放比,对所述目标图形格式的图形进行放大或者缩小,以使所述目标图形格式的图形在所述显示屏中进行完全显示。例如,若所导出的目标图形格式的图形的尺寸为显示屏的尺寸的4倍,则需将所述目标图形格式的图形缩小4倍,即可使该目标图形格式的图形在所述显示屏中进行完全显示,以便于用户对其进行进一步操作和处理。此外,根据所述目标图形格式的图形的尺寸和所述显示屏的尺寸,还可确定缩放比及留白区域,以更好的效果地呈现该SVG图形。
具体而言,如图2所示,现以包含外部图片的SVG图形为例对本发明所提供的SVG图形的导出过程进行解释和说明,具体的导出流程如下:
步骤S201,获取SVG图形。
步骤S202,判断所述SVG图形的尺寸是否大于显示屏尺寸,如果是,则执行步骤S203;否则,执行步骤S209。
步骤S203,确定直接导出所述SVG图形所得到的为非完整图形,并克隆所述SVG图形。
在所述SVG图形的尺寸大于显示屏尺寸的情况下,按照现有技术中的方式(具体细节不再在此赘述)将所述SVG图形直接导出,会导致隐藏在显示屏左上侧的SVG图形无法导出,故确定直接导出所述SVG图形所得到的为非完整图形。
步骤S204,将克隆的SVG图形置于Canvas画布中。
由于所述Canvas画布的可显示区域大于所述SVG图形的尺寸,故可将完整的所示克隆的SVG图形置于Canvas画布中。
步骤S205,确定所述Canvas画布的起始边界的位置。
一般情况下,可确定所述Canvas画布的可显示区域的起始边界为其左侧和上侧。
步骤S206,将所述克隆的SVG图形的位置调整为一端与所述起始边界的位置对齐。
在所述克隆的SVG图形的一端与所述起始边界的位置对齐,其另一端位于无限延展的所述Canvas画布的可显示区域内。考虑到Canvas画布自身坐标系的原点通常位于显示屏的左上角,向右下方无限延展,因此,通常可以将所述克隆的SVG图形的左上角与所述Canvas画布的可显示区域的左上角对齐,所述克隆的SVG图形将会位于所述Canvas画布的可显示区域内。所述Canvas画布可识别所述SVG图形中的所有元素,从而能够保证所述SVG图形可完整导出。
步骤S207,检查所述克隆的SVG图形中是否包含引用的外部图片,如果是,则执行步骤S208;否则,执行步骤S209。
该步骤S207可通过检查所述克隆的SVG图形中是否包含image标签来完成。
步骤S208,将所述引用的外部图片进行删除,以便所述克隆的SVG图形能够无阻塞导出。
将image标签所指向的地址处的外部图片全部删除,以避免外部图片阻塞所述克隆的SVG图形的导出过程,从而可实现所述SVG图形的完整导出。
步骤S209,确定需要导出的目标图形格式。
所述目标图形格式至少包括:PNG和JPEG中的至少一种。该目标图形格式可根据用户的实际需求确定。
步骤S210,调用Canvg库的接口,将克隆的所述SVG图形转换为Canvas图形。
步骤S211,调用浏览器接口,将所述Canvas图形转换为所述目标图形格式的图形,并导出所述目标图形格式的图形。
步骤S212,获取导出的目标图形格式的图形的尺寸和显示屏的尺寸。
步骤S213,根据所述目标图形格式的图形的尺寸和所述显示屏的尺寸,确定缩放比。
步骤S214,根据所述缩放比,对所述目标图形格式的图形进行放大或者缩小,以使所述目标图形格式的图形在所述显示屏中进行完全显示。
当然,本发明所提供的导出方法并不限于上述将SVG图形的导出过程,还可包括对所克隆的SVG图形进行一定的修改,以及修改之后再对所修改的图形进行保存。由于基于所克隆的SVG图形进行修改,故不涉及对网页中的SVG图形的破坏。
综上所述,本发明创造性地通过克隆手段获得所克隆的SVG图形,从而可支持所克隆的SVG图形的位置移动,将其置于Canvas画布中,再由于所述Canvas画布的可显示区域大于该SVG图形的尺寸,故通过调整所克隆的SVG图形的位置将其置于Canvas画布的可显示区域,进而可实现SVG图形的完整导出。
相应地,如图3所示,本发明另一方面还提供一种SVG图形的导出系统,所述系统可包括:图形获取模块30,用于获取所述SVG图形;克隆模块31,用于克隆所述SVG图形;放置模块32,用于将克隆的SVG图形置于Canvas画布中,所述Canvas画布的可显示区域大于所述SVG图形的尺寸;位置调整模块33,用于调整所述克隆的SVG图形的位置,以使所述克隆的SVG图形位于所述Canvas画布的可显示区域内;以及导出模块34,用于将所述Canvas画布中的所述克隆的SVG图形导出,以得到完整图形。
有关本发明提供的SVG图形的导出系统的具体细节及益处可参阅上述针对SVG图形的导出方法的描述,于此不再赘述。
相应地,本发明又一方面还提供一种机器可读存储介质,该机器可读存储介质上存储有指令,该指令用于使得机器执行上述的SVG图形的导出方法。
相应地,本发明又一方面还提供一种处理器,该处理器用于运行程序,其中,所述程序被运行时用于执行上述的SVG图形的导出方法。
本领域内的技术人员应明白,本申请的实施例可提供为方法、系统、或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中,计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括暂存电脑可读媒体(transitory media),如调制的数据信号和载波。
还需要说明的是,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。
本领域技术人员应明白,本申请的实施例可提供为方法、系统或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
以上仅为本申请的实施例而已,并不用于限制本申请。对于本领域技术人员来说,本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等,均应包含在本申请的权利要求范围之内。

Claims (10)

1.一种SVG图形的导出方法,其特征在于,所述方法包括:
获取所述SVG图形;
克隆所述SVG图形;
将克隆的SVG图形置于Canvas画布中,所述Canvas画布的可显示区域大于所述SVG图形的尺寸;
调整所述克隆的SVG图形的位置,以使所述克隆的SVG图形位于所述Canvas画布的可显示区域内;以及
将所述Canvas画布中的所述克隆的SVG图形导出,以得到完整图形。
2.根据权利要求1所述的SVG图形的导出方法,其特征在于,在获取SVG图形后,所述方法还包括:
判断所述SVG图形的尺寸是否大于显示屏尺寸;以及
如果是,则确定直接导出所述SVG图形所得到的为非完整图形,并转入执行克隆所述SVG图形的步骤。
3.根据权利要求1或2任一项所述的SVG图形的导出方法,在将所述Canvas画布中的所述克隆的SVG图形导出前,所述方法还包括:
检查所述克隆的SVG图形中是否包含引用的外部图片;以及
如果是,则将所述引用的外部图片进行删除,以便所述克隆的SVG图形能够无阻塞导出。
4.根据权利要求1或2任一项所述的SVG图形的导出方法,其特征在于,所述Canvas画布的可显示区域的起始边界的位置确定,且沿所述起始边界无限延展,
所述调整所述克隆的SVG图形的位置,以使所述克隆的SVG图形位于所述Canvas画布的可显示区域内包括:
确定所述Canvas画布的起始边界的位置;以及
将所述克隆的SVG图形的位置调整为一端与所述起始边界的位置对齐,另一端位于无限延展的所述Canvas画布的可显示区域内。
5.根据权利要求1或2所述的SVG图形的导出方法,其特征在于,在将所述Canvas画布中的所述克隆的SVG图形导出前,所述方法还包括:
确定需要导出的目标图形格式,所述目标图形格式至少包括:PNG和JPEG中的至少一种,
所述将所述Canvas画布中的所述克隆的SVG图形导出,包括:
调用Canvg库的接口,将克隆的所述SVG图形转换为Canvas图形;以及
调用浏览器接口,将所述Canvas图形转换为所述目标图形格式的图形,并导出所述目标图形格式的图形。
6.根据权利要求5所述的SVG图形的导出方法,其特征在于,在将所述Canvas画布中的所述克隆的SVG图形导出后,所述方法还包括:
获取导出的目标图形格式的图形的尺寸和显示屏的尺寸;
根据所述目标图形格式的图形的尺寸和所述显示屏的尺寸,确定缩放比;以及
根据所述缩放比,对所述目标图形格式的图形进行放大或者缩小,以使所述目标图形格式的图形在所述显示屏中进行完全显示。
7.一种SVG图形的导出系统,其特征在于,所述系统包括:
图形获取模块,用于获取所述SVG图形;
克隆模块,用于克隆所述SVG图形;
放置模块,用于将克隆的SVG图形置于Canvas画布中,所述Canvas画布的可显示区域大于所述SVG图形的尺寸;
位置调整模块,用于调整所述克隆的SVG图形的位置,以使所述克隆的SVG图形位于所述Canvas画布的可显示区域内;以及
导出模块,用于将所述Canvas画布中的所述克隆的SVG图形导出,以得到完整图形。
8.根据权利要求7所述的SVG图形的导出系统,其特征在于,所述系统还包括:
判断模块,用于判断所获取的所述SVG图形的尺寸是否大于显示屏尺寸;以及
非完整图形确定模块,用于在所述判断模块判断出所获取的所述SVG图形的尺寸大于所述显示屏尺寸的情况下,则确定直接导出所述SVG图形所得到的为非完整图形。
9.一种机器可读存储介质,其特征在于,该机器可读存储介质上存储有指令,该指令用于使得机器执行权利要求1-6中任一项所述的SVG图形的导出方法。
10.一种处理器,其特征在于,该处理器用于运行程序,其中,所述程序被运行时用于执行根据权利要求1-6中任一项所述的SVG图形的导出方法。
CN201811287032.9A 2018-10-31 2018-10-31 Svg图形的导出方法及导出系统 Pending CN111127594A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811287032.9A CN111127594A (zh) 2018-10-31 2018-10-31 Svg图形的导出方法及导出系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811287032.9A CN111127594A (zh) 2018-10-31 2018-10-31 Svg图形的导出方法及导出系统

Publications (1)

Publication Number Publication Date
CN111127594A true CN111127594A (zh) 2020-05-08

Family

ID=70485596

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811287032.9A Pending CN111127594A (zh) 2018-10-31 2018-10-31 Svg图形的导出方法及导出系统

Country Status (1)

Country Link
CN (1) CN111127594A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112269957A (zh) * 2020-11-11 2021-01-26 北京联创信安科技股份有限公司 图片处理方法、装置、设备及存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130167001A1 (en) * 2011-12-23 2013-06-27 Rocco De Angelis Creating html/css representations of a geometric symbol
CN104572967A (zh) * 2014-12-30 2015-04-29 北京奇虎科技有限公司 一种在页面绘制图形的方法和装置
CN105279253A (zh) * 2015-10-13 2016-01-27 上海联彤网络通讯技术有限公司 提升网页画布渲染速度的系统及方法
CN106569765A (zh) * 2016-10-27 2017-04-19 深圳市元征科技股份有限公司 画面显示方法和装置
CN106709960A (zh) * 2015-11-17 2017-05-24 北京国双科技有限公司 图像保存的方法、装置及系统

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130167001A1 (en) * 2011-12-23 2013-06-27 Rocco De Angelis Creating html/css representations of a geometric symbol
CN104572967A (zh) * 2014-12-30 2015-04-29 北京奇虎科技有限公司 一种在页面绘制图形的方法和装置
CN105279253A (zh) * 2015-10-13 2016-01-27 上海联彤网络通讯技术有限公司 提升网页画布渲染速度的系统及方法
CN106709960A (zh) * 2015-11-17 2017-05-24 北京国双科技有限公司 图像保存的方法、装置及系统
CN106569765A (zh) * 2016-10-27 2017-04-19 深圳市元征科技股份有限公司 画面显示方法和装置

Non-Patent Citations (5)

* Cited by examiner, † Cited by third party
Title
SHELLJ: "html5中svg,canvas和图片之间的相互转化", 《HTTPS://BLOG.CSDN.NET/JIANGCS520/ARTICLE/DETAILS/12842593》, 18 October 2013 (2013-10-18), pages 1 *
SHELLJ: "html5中svg,canvas和图片之间的相互转化", 《HTTPS://BLOG.CSDN.NET/JIANGCS520/ARTICLE/DETAILS/12842593》, pages 29 - 31 *
江开耀: "《软件工程专业毕业设计宝典》", 31 March 2008, 西安电子科技大学出版社, pages: 157 - 158 *
许舰: "Android自定义绘图组件的设计与实现", 《电脑知识与技术》 *
许舰: "Android自定义绘图组件的设计与实现", 《电脑知识与技术》, no. 10, 5 April 2018 (2018-04-05), pages 95 - 98 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112269957A (zh) * 2020-11-11 2021-01-26 北京联创信安科技股份有限公司 图片处理方法、装置、设备及存储介质

Similar Documents

Publication Publication Date Title
KR102215766B1 (ko) 합성 화상을 생성하는 방법 및 장치
CN110210400B (zh) 一种表格文件检测方法及设备
CN106611401B (zh) 一种在纹理内存中存储图像的方法及装置
CN108228050B (zh) 一种图片缩放方法、装置以及电子设备
WO2019196542A1 (zh) 一种图像处理的方法及装置
CN105787402B (zh) 一种信息展示方法及装置
CN107221016B (zh) SVG格式的Path图形的处理方法及其装置
CN107526592B (zh) 一种页面适配方法和装置
CN109324796B (zh) 界面布局方法及装置
CN107977342B (zh) 一种文档对比方法及装置
CN108460003B (zh) 文本数据的处理方法和装置
CN109857964B (zh) 一种页面操作的热力图绘制方法、装置、存储介质及处理器
CN111127594A (zh) Svg图形的导出方法及导出系统
CN111277659A (zh) 手机横屏竖屏显示状态检测方法及装置
CN114359533A (zh) 一种基于页面文本的页码识别方法和计算机设备
CN109582188B (zh) 一种实现弹窗内元素定位的方法、装置及相关设备
CN105868201B (zh) 页面生成方法及装置
CN110968385A (zh) 比例显示方法和装置
CN109948083B (zh) 网页处理方法及装置
CN109101144B (zh) 热力图绘制方法及装置
US20190187667A1 (en) Development support apparatus, program development support method, and program development support program
CN110968811A (zh) 显示控制方法和装置
CN111125998A (zh) 文本处理方法和装置
CN108089904A (zh) 一种展示页面扩展方法及设备
CN112115690A (zh) 一种移动端表格中选区的方法、系统、存储介质和终端

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination