CN112052050A - 一种分享图片生成方法、系统及存储介质和终端设备 - Google Patents
一种分享图片生成方法、系统及存储介质和终端设备 Download PDFInfo
- Publication number
- CN112052050A CN112052050A CN202010842286.3A CN202010842286A CN112052050A CN 112052050 A CN112052050 A CN 112052050A CN 202010842286 A CN202010842286 A CN 202010842286A CN 112052050 A CN112052050 A CN 112052050A
- Authority
- CN
- China
- Prior art keywords
- node
- information
- nodes
- picture
- shared picture
- 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.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
- G06F9/4451—User profiles; Roaming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/46—Multiprogramming arrangements
- G06F9/54—Interprogram communication
- G06F9/543—User-generated data transfer, e.g. clipboards, dynamic data exchange [DDE], object linking and embedding [OLE]
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明实施例公开了一种分享图片生成方法、系统及存储介质和终端设备,应用于基于人工智能的图片处理技术领域。分享图片生成系统在生成分享图片时,会获取配置文件,该配置文件包括多个节点的配置信息,每个节点对应分享图片中的一个元素,解析该配置文件得到多个节点分别对应的属性信息和多个节点之间的关系信息,进而绘制多个节点对应元素的子图像,获得分享图片。在这个过程中,只需按照配置文件中配置的分享图片中各个元素的属性等,在画布中直接绘制这些元素的子图像,使得这些子图像满足配置文件中配置的属性,整个过程花费时间较少,生成效率几乎是现有技术中生成分享图片方法的几十倍;同时能兼容各种类型的小程序。
Description
技术领域
本发明涉及基于人工智能的图片处理技术领域,特别涉及一种分享图片生成方法、系统及存储介质和终端设备。
背景技术
对于小程序,比如微信小程序(或其它小程序)开发而言,生成分享图片并传播小程序几乎是每个小程序都需要的“硬“功能,但是在小程序中,分享图片的合成成本并不低,考虑到各种类型的小程序、各种安装小程序的终端设备的兼容性问题,实际的开发成本将更高。
目前在生成小程序的分享图片时,一般需要开发用户编写若干行较复杂的连续操作的代码,并在创建的canvas画布上运行编写的代码,才能生成一张符合要求的分享图片。但是,现有的分享图片生成过程中,需要通过编写复杂的代码逻辑,来实现分享图片生成的整个过程,实现成本高,且容易出错,不但需要考虑到手机设备兼容性,还需要兼容各种类型小程序,完全不具备通用性。
发明内容
本发明实施例提供一种分享图片生成方法、系统及存储介质和终端设备,实现了花费时间较少的分享图片生成方法。
本发明实施例一方面提供一种分享图片生成方法,包括:
获取分享图片的配置文件,所述配置文件中包括多个节点的配置信息,每个节点对应所述分享图片中的一个元素;
解析所述配置文件中多个节点的配置信息,得到所述多个节点分别对应的属性信息及所述多个节点之间的关系信息;
根据所述多个节点分别对应的属性信息及所述多个节点之间的关系信息,绘制所述多个节点对应元素的子图像,获得所述分享图片。
本发明实施例另一方面提供一种分享图片生成系统,包括:
配置获取单元,用于获取分享图片的配置文件,所述配置文件中包括多个节点的配置信息,每个节点对应所述分享图片中的一个元素;
解析单元,用于解析所述配置文件中多个节点的配置信息,得到所述多个节点分别对应的属性信息及所述多个节点之间的关系信息;
绘制单元,用于根据所述多个节点分别对应的属性信息及所述多个节点之间的关系信息,绘制所述多个节点对应元素的子图像,获得所述分享图片。
本发明实施例另一方面还提供一种计算机可读存储介质,所述计算机可读存储介质储存多个计算机程序,所述计算机程序适于由处理器加载并执行如本发明实施例一方面所述的分享图片生成方法。
本发明实施例另一方面还提供一种终端设备,包括处理器和存储器;
所述存储器用于储存多个计算机程序,所述计算机程序用于由处理器加载并执行如本发明实施例一方面所述的分享图片生成方法;所述处理器,用于实现所述多个计算机程序中的各个计算机程序。
可见,在本实施例的方法中,分享图片生成系统在生成分享图片时,会获取配置文件,该配置文件多个节点的配置信息,每个节点对应分享图片中的一个元素,解析该配置文件得到多个节点分别对应的属性信息和多个节点之间的关系信息,进而在画布中依次绘制多个节点对应元素的子图像,获得分享图片。在这个过程中,不需要开发用户编辑复杂的绘制分享图片的代码,比如如何在画布中绘制分享图片中各个元素的代码,只需按照配置文件中配置的分享图片中各个元素的属性等,在画布中直接绘制这些元素的子图像,使得这些子图像满足配置文件中配置的属性,整个过程花费时间较少,生成效率几乎是现有技术中生成分享图片方法的几十倍;同时由于根据配置文件绘制分享图片不受小程序类型的限制,能兼容各种类型的小程序。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1是本发明实施例提供的一种分享图片生成方法的示意图;
图2是本发明一个实施例提供的一种分享图片生成方法的流程图;
图3是本发明一个实施例中在画布中绘制一个节点对应元素的子图像的方法示意图;
图4是发明一个实施例中确定节点对应元素的子图像在画布中位置的实现示意图;
图5是本发明应用实施例中提供的一种图片生成方法的示意图;
图6是本发明应用实施例中分享图片生成的结构图;
图7是本发明应用实施例中配置文件实现的示意图;
图8a是本发明应用实施例中在绘制节点1后的示意图;
图8b是本发明应用实施例中在绘制节点2后的示意图;
图8c是本发明应用实施例中在绘制节点3后的示意图;
图8d是本发明应用实施例中在绘制节点4后的一种示意图;
图8e是本发明应用实施例中在绘制节点4后的另一种示意图;
图9是本发明另一应用实施例中分享图片生成方法所应用于的分布式系统的示意图;
图10是本发明另一应用实施例中区块结构的示意图;
图11是本发明实施例提供的一种分享图片生成系统的结构示意图;
图12是本发明实施例提供的一种终端设备的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”“第四”等(如果存在)是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本发明的实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排它的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
本发明实施例提供一种分享图片生成方法,可以应用于生成小程序的分享图片,能兼容各类小程序(包括微信小程序、QQ小程序、阿里小程序、头条小程序和百度小程序等),还可以应用生成其它各种类型的应用中的分享图片,具体如图1所示,本发明实施例中的分享图片生成系统可以按照如下步骤实现分享图片的生成:
获取分享图片的配置文件,所述配置文件中包括多个节点(图中以n个节点为例说明)的配置信息,每个节点对应所述分享图片中的一个元素;解析所述配置文件中多个节点的配置信息,得到所述多个节点分别对应的属性信息及所述多个节点之间的关系信息;根据所述多个节点分别对应的属性信息及所述多个节点之间的关系信息,绘制所述多个节点对应元素的子图像,获得所述分享图片。
在这个过程中,不需要开发用户编辑复杂的绘制分享图片的代码,比如如何在画布中绘制分享图片中各个元素的代码,只需按照配置文件中配置的分享图片中各个元素的属性等,在画布中直接绘制这些元素对应的子图像,使得这些子图像满足配置文件中配置的属性,整个过程花费时间较少,生成效率几乎是现有技术中生成分享图片方法的几十倍;同时由于根据配置文件绘制分享图片不受小程序类型的限制,能兼容各种类型的小程序。
需要说明的是,本发明实施例的分享图片生成方法主要是应用基于人工智能技术中计算机视觉技术的图片处理领域。其中,人工智能(Artificial Intelligence,AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能,感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。换句话说,人工智能是计算机科学的一个综合技术,它企图了解智能的实质,并生产出一种新的能以人类智能相似的方式做出反应的智能机器。人工智能也就是研究各种智能机器的设计原理与实现方法,使机器具有感知、推理与决策的功能。而人工智能技术是一门综合学科,涉及领域广泛,既有硬件层面的技术也有软件层面的技术。人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。
其中的计算机视觉技术(Computer Vision,CV)计算机视觉是一门研究如何使机器“看”的科学,更进一步的说,就是指用摄影机和电脑代替人眼对目标进行识别、跟踪和测量等机器视觉,并进一步做图形处理,使电脑处理成为更适合人眼观察或传送给仪器检测的图像。作为一个科学学科,计算机视觉研究相关的理论和技术,试图建立能够从图像或者多维数据中获取信息的人工智能系统。计算机视觉技术通常包括图像处理、图像识别、图像语义理解、图像检索、OCR、视频处理、视频语义理解、视频内容/行为识别、三维物体重建、3D技术、虚拟现实、增强现实、同步定位与地图构建等技术,还包括常见的人脸识别、指纹识别等生物特征识别技术。
本发明实施例提供一种分享图片生成方法,主要是由分享图片生成系统所执行的方法,流程图如图2所示,包括:
步骤101,获取分享图片的配置文件,配置文件中包括多个节点的配置信息,其中每个节点对应分享图片中的一个元素。
可以理解,本实施例中,在生成分享图片时,不需要编辑复杂的代码,而是直接获取分享图片的配置文件,一般为(javascript object notation,JSON)等格式的配置文件,该配置文件包括的各个节点的配置信息,具体为待绘制的分享图片中所有元素分别对应的配置信息,且还可以包括分享图片的整体配置信息。
其中,分享图片是由各个元素组成的,比如分享图片中包含背景图片、程序扫描码、用户头像和文字等元素,则配置文件中包括分享图片中相应位置的背景图片、程序扫描码、用户头像和文字等元素的配置信息。各个节点的配置信息可以包括各个节点的属性信息及各个节点之间的关系信息,用于指示分享图片中各个元素的属性及各个元素之间的关系;分享图片的整体配置信息用于指示上述所有元素组成的分享图片的属性及其中所有元素都具有的全局的属性信息,而各个元素都具有的全局的属性信息可以是在绘制这些元素过程中的属性,或是绘制好这些元素后所具备的属性。
步骤102,解析配置文件中多个节点的配置信息,得到多个节点分别对应的属性信息及多个节点之间的关系信息。
具体地,各个节点的属性信息可以包括但不限于如下属性:宽度(Width)、最大宽度(maxWidth)、高度(height)、距离顶部距离(top)、对齐方式(align)、距离左侧距离(left)、最大行数(maxRow)、颜色(color)、节点类型(文本或图片)用于指示节点对应元素的子图像中的内容类型、字体像素(fontSize)、是否包含表情圆角绘制效果(boderRadius)和是否旋转(rotate);多个节点之间的关系信息包括多个节点之间的顺序及多个节点之间的层级关系,其中,节点之间的层级关系可以指示节点之间的相互包含关系。
如果配置文件中还包括分享图片的整体配置信息时,分享图片生成系统还会解析配置文件中的整体配置信息,得到分享图片的整体属性,其中,整体属性包括但不限于如下至少一个属性:宽度、高度、是否展示加载动画(showLoading)、图片类型(filetype)用于指示分享图片的类型、绘制超时时间(timeout)、是否启用本地缓存(cache)、本地缓存的大小(cache)和是否输出渲染日志(log)。可见,分享图片的整体属性不仅描述了分享图片中各个节点在绘制过程中产生的信息,比如是否启用本地缓存和绘制超时时间等,还描述了分享图片在生成后所呈现的信息,比如宽度、高度和是否展示加载动画等。
步骤103,根据多个节点分别对应的属性信息及多个节点之间的关系信息,绘制多个节点对应元素的子图像,获得分享图片,该分享图像中包括了各个节点对应元素的子图像。
具体地,分享图片生成系统会按照多个节点的顺序,遍历每个节点,在画布的相应位置依次绘制每个节点对应元素的子图像,这样所有节点对应元素的子图像即可组成分享图片,在绘制任一节点对应元素的子图像时,按照该节点的属性信息及与其它节点的关系信息进行绘制,使得绘制子图像满足任一节点的属性信息及与其它节点的关系信息。
进一步地,如果从上述配置文件中还解析出分享图片的整体属性,则分享图片生成系统在执行本步骤时,具体是根据分享图片的整体属性、多个节点分别对应的属性信息及多个节点之间的关系信息,在画布中依次绘制多个节点对应元素的子图像。
需要说明的是,在执行上述步骤102和103时,可以将配置文件全部解析完成后,得到分享图片的整体属性、所有节点的属性信息和节点之间的关系信息后,再执行步骤103中的绘制;也可以一边解析配置文件一边绘制各个节点对应元素的子图像,即在解析配置文件得到一个节点的属性信息,则按照解析的属性信息进行绘制该一节点对应元素的子图像,然后再解析配置文件得到该一节点与下一节点之间的关系信息及下一节点的属性信息,进而再绘制下一节点对应元素的子图像。
可见,在本实施例的方法中,分享图片生成系统在生成分享图片时,会获取配置文件,该配置文件包括多个节点的配置信息,每个节点对应分享图片中一个元素,解析该配置文件得到多个节点分别对应的属性信息和多个节点之间的关系信息,进而绘制多个节点对应元素的子图像,获得分享图片。在这个过程中,不需要开发用户编辑复杂的绘制分享图片的代码,比如如何在画布中绘制分享图片中各个元素的代码,只需按照配置文件中配置的分享图片中各个元素的属性等,直接绘制这些元素,使得这些元素的子图像满足配置文件中配置的属性,整个过程花费时间较少,生成效率几乎是现有技术中生成分享图片方法的几十倍;同时由于根据配置文件绘制分享图片不受小程序类型的限制,能兼容各种类型的小程序,且可以适用于任意应用中图片的生成。
在一个具体的实施例中,分享图片生成系统在执行上述步骤102的过程中,针对任一节点,可以解析到一个节点的属性信息及与其它节点之间的关系信息,则在执行步骤103中根据一个节点的属性信息及一个节点与其它节点之间的关系信息,绘制一个节点对应元素的子图像时,先确定待绘制的画布,并根据一个节点与其它节点之间的关系信息,确定一个节点与另一节点的关系信息为:另一节点包含一个节点,相应地确定画布中一个节点对应区域在另一节点对应区域内;然后再根据一个节点的属性信息,在确定的区域内绘制一个节点对应元素的子图像。
其中,分享图片生成系统在根据一个节点的属性信息,在确定的区域内绘制一个节点对应元素的子图像时,具体可以通过如下的步骤来实现,流程图如图3所示,包括:
步骤201,根据一个节点的属性信息进行预操作,得到绘制一个节点时所用的信息。
具体地,根据一个节点的属性信息进行的预操作,可以包括但不限于如下至少一项操作:
A1、判断一个节点的属性信息是否包括长度信息,如果包括,则执行步骤A2;如果不包括执行步骤A3。
A2、将长度信息归一化为同一计量单位下的长度信息,然后继续执行步骤A3。
在任一节点的属性中,有些属性的值是包括长度信息的,比如高度和宽度等属性,而不同属性的值采用不同的长度单位计量,一般包括如下表1中所述的几种计量单位,本实施例中,为了方便图片的绘制,需要将这些长度信息归一化为同一计量单位下的长度信息,比如都归一化到像素大小。
表1
A3、判断一个节点的属性信息是否包括节点类型为文本,即该一个节点对应元素的子图像的内容是否为文本,如果包括,则执行步骤A4到A7,如果不包括,结束预操作,或继续执行其它预操作。
A4、初始化绘制对应文本的信息,具体地,可以初始化文本中字体类型、大小、粗细、以及文字的基线和对齐方式等。
A5、判断一个节点的属性信息是否包括文本的最大宽度和最大行数,如果包括,执行步骤A6;如果不包括,直接确定待绘制文本内容为该一个节点的属性信息中指出的文本内容。
A6、判断文本内容中是否包含表情,如果包含,执行步骤A7;如果不包含,根据文本的最大宽度和最大行数,确定待绘制文本内容,使得待绘制文本内容的宽度和行数不超出文本的最大宽度和最大行数,在这种情况下,需要对该一个节点的属性信息中指出的超长文本内容进行截断。
A7、确定表情(包括一个或多个表情)的宽度和所占字符数,根据表情的宽度和所占字符数及文本的最大宽度和最大行数,确定待绘制文本内容,使得待绘制文本内容的宽度和行数不超出文本的最大宽度和最大行数。
在这种情况下,需要对该一个节点的属性信息中指出的超长字符和超长表情进行截断,具体地,可以分别截断超长字符和超长表情,在截断超长字符时,按照一个字符长度来截断;截断表情时,根据每个表情所占字符数,截断相应字符数的文本,最终确定的待绘制文本内容中可以包括字符和表情。
需要说明的是,在限制文本的最大宽度和最大行数的情况下,对于超长的文本需要进行截断,使得截断后的文本的宽度在最大宽度的范围之内,且不会超出最大行数。一般情况下,文本的最小宽度为一个字符长度,按字符长度截断文本中字符是不会出现乱码,而对于表情要复杂得多,一个表情通常占多个字符长度,按一个字符长度去截断表情,则会出现乱码,本实施例中,对于一个节点的属性信息中指出的超长的表情,需要确定每个表情的宽度和所占字符数,并按照根据各个表情的宽度和所占字符数来截断,这样才能实现表情的正常截断和展示。
例如,一个文本包括5个字符和3个表情,其中3个表情所占字符数分别2、3和4个字符数,则对该文本进行截断时,可以截取5个字符中的2个字符,然后再截取2个字符,这样截断后的文本中包括2个字符和一个表情,即可正常展示截断后的文本。
步骤202,判断一个节点的属性信息中是否包括旋转信息,如果是,则执行步骤203;如果不包括旋转信息,执行步骤204。
步骤203,根据旋转信息将画布进行旋转,具体地,平移整个画布的坐标原点,并旋转指定度数;然后再根据一个节点的属性信息在旋转后的画布上绘制对应的子图像,在旋转后的画布中一个节点对应区域在另一节点对应区域内,这样,通过步骤203中对画布旋转后绘制出的分享图片,具有旋转效果。
需要说明的是,执行本步骤203与执行如下步骤204的方法类似,不同的是,在执行本步骤203时,分享图片生成系统会在旋转后的画布上绘制子图像,而步骤204中,是在未旋转的画布上绘制子图像。
步骤204,根据一个节点的属性信息在上述确定的区域内绘制对应的子图像。
具体地,分享图片生成系统可以按照如下步骤来实现本在步骤204,具体包括:
B1、判断一个节点的属性信息中是否包括边框(border)信息,如果包括,则在画布中该一个节点对应区域内预留边框,并执行步骤B2和B3,或执行步骤B2和B5;如果不包括,不需要预留边框,直接执行步骤B2和B4,或执行步骤B2和B5。
B2、判断一个节点的属性信息中是否包括背景信息(background)或阴影信息(boxShadow),如果包括,执行步骤B3或B4;如果不包括,继续执行步骤B5。
B3、在预留边框后的区域绘制背景图片或绘制阴影,进而裁剪画布中该一个节点对应区域且在预留的边框内绘制边框,之后继续执行步骤B5。
其中,在绘制背景、圆角、阴影等特殊效果时,由于这些特殊效果只是针对分享图片中的一个元素所具有的效果,为了不会对整个画布进行这些特殊效果的绘制,本实施例中对画布局部区域需要先裁剪出来,然后在裁剪出来的区域进行单独处理,处理完成后再放到画布的相应位置,如果不裁剪,就会对整个画布进行处理,使得整个画布都具有这些特殊效果。
B4、裁剪画布中一个节点对应区域,在裁剪后的区域中绘制背景图片或绘制阴影,之后继续执行步骤B5。
B5、判断一个节点的属性信息是否包括圆角效果,如果包括,执行步骤B6;如果不包括,继续执行步骤B7。
B6、裁剪画布中一个节点对应区域并在裁剪后的区域中绘制圆角,之后继续执行步骤B7。
B7、判断一个节点的属性信息是否包括节点类型为图片、图片的原始大小及待绘制的图片大小,如果包括,执行步骤B8;如果不包括,继续执行步骤B9。
B8、根据原始图片的大小及待绘制的图片大小确定一个节点对应元素的子图像在画布中的位置信息,根据位置信息在画布的相应位置绘制一个节点对应元素的子图像,之后执行步骤B9。
具体地,在确定一个节点对应元素的子图像在画布中的位置时,可以先根据原始图片的宽高w0、h0,及需要绘制的待绘制图片的宽高w1、h1,等比缩放原始图片,使得缩放后的图片宽度w2等于待绘制图片的宽度w1,并确定出原始图片中能够展示的高度h2,再结合图片的对齐方式,加权计算h0和h2,最终可以得到待绘制图片的位置信息。
具体如图4所示的实现算法中,将绘制的子图像的宽度固定为画布的宽度,这样,确定原始图片的缩放比率(ratio)即为画布宽度w与原始图片宽度(width)的比值,如果在对原始图片缩放过程中,高度的缩放比率(hratio)大于或等于对宽度的缩放比率(wratio),则待绘制图片的高度sHeight为画布的高度h与上述确定的缩放比率的比值,若图片的对齐方式(align)是居中(middle),则从原始图片的纵坐标sy=(height-sHeight)/2处截断原始图片得到待绘制图片,若图片的对齐方式是底部(bottom),则从原始图片的纵坐标sy=height-sHeight处截断原始图片得到待绘制图片,若图片的对齐方式未指定,则从原始图片的纵坐标sy=(height-sHeight)/2处截断原始图片得到待绘制图片,即默认居中展示。
进一步地,如果对原始图片缩放过程中高度的缩放比率(hratio)小于对宽度的缩放比率(wratio),则画布的高度dHeight为原始图片的高度height与上述确定的缩放比率的乘积。
B9、判断一个节点的属性信息是否包括节点类型为文本,如果包括,则执行步骤B10;如果不包括,结束对该一个节点对应元素的子图像的绘制。
B10、根据上述步骤201的预操作中初始化绘制对应文本的信息及确定的待绘制文本内容,在画布中一个节点对应区域绘制相应文本内容。
需要说明的是,上述步骤201到204是根据从配置文件中解析出的一个节点的属性信息和与其它节点之间的关系信息,在画布上绘制一个节点对应元素的子图像的过程,其它节点对应元素的子图像的绘制类似,在此不进行赘述。而在配置文件中还包括分享图片的整体配置信息,这样会解析出分享图片的整体属性,如果整体属性中包括分享图片的宽度、高度及启动缓存的信息,则在绘制任一节点对应元素的子图像之前,还需要根据分享图片的宽度和高度,确定绘制分享图片的画布大小,并启动缓存,该缓存用于储存绘制分享图片时所用的信息。这样,通过启动绘制分享图片的本地缓存,事先在本地缓存中储存绘制分享图片时所用的信息,可以减少分享图片在生成过程中加载图片或文本的耗时,从而减少了分享图片生成的时间。
进一步需要说明的是,上述步骤201到204及步骤B1到B10之间的执行顺序不能随便改变,因为后续步骤对前置步骤有强依赖性,如果改变,则无法实现正常的坐标变换、特殊效果绘制,按照上述实施例中所述的顺序进行节点对应元素的子图像的绘制时,绘制内容不会出现偏差,同时也符合H5中节点渲染的标准,且花费时间是最少的。主要是由于在绘制每个节点对应元素的子图像的过程中,需要固定画布,这样在之后的绘制过程中才能按照固定的坐标系进行绘制,上述步骤中先进行旋转画布,使得坐标系固定,然后再绘制边框、背景或阴影及圆角是较优的一种绘制方法;如果先进行边框等元素的绘制后再旋转画布时,需要重新确定坐标系,且之前绘制的边框等元素都需要重新调整。
以下以一个具体的应用实例来说明本发明的分享图片生成方法,本实施例中的方法主要应用于小程序中分享图片的生成,如图5所示,具体可以包括如下的步骤:
步骤301,通过将分享图片的配置文件封装在小程序插件中,这样在分享图片生成系统中装载该小程序插件后,分享图片生成系统会向用户提供生成分享图片的接口,用户可以通过该接口启动本实施例中分享图片生成的流程。
本实施例中的配置文件可以是JSON格式的文件,具体可以包括分享图片中所有元素分别对应的配置信息及分享图片的整体配置信息。
具体地,如图6所示,本实施例中,将小程序的分享图片生成过程的共性逻辑设置在配置文件中,在配置文件中将分享图片中的元素设置为一个个节点,每个节点依赖多个属性描述,有些节点还可以具有包含关系,将这些封装在小程序插件中。通过调用小程序插件在Canvas画布中绘制时,采用深度遍历算法,遍历配置文件中的所有节点,便可以完成分享图片的绘制工作,其中,分享图片中各个元素的属性都可以通过配置文件来配置,这些属性一一映射到画布中绘制图片、文本、及各种效果(背景、边框、阴影、圆角、旋转)的具体逻辑,通过配置多个节点的属性信息,就可以生成复杂的分享图片。
步骤302,获取配置文件,按照顺序解析配置文件,首先解析到的是分享图片的整体属性,可以包括但不限于如下表2所示的属性:
表2
这里整体属性是分享图片的全局的属性,可以根据其中的width和height属性设置画布的宽高;根据FileType属性确定了在储存分享图片时的格式;根据Cache属性确定需要启动最近最少用(east Recently Used,LRU)的本地缓存,则启动缓存,来临时储存绘制分享图片过程中用到的图片或文本等。
具体地,在启动的缓存中可以储存在如下步骤303的预操作过程中所需的原始文本内容(在配置文件中指出的文本内容),及经过步骤303之后确定的待绘制文本内容,及如下步骤305中需要用到的原始图片(在配置文件中指出的图片)等。
进一步地,根据children属性,会解析得到一个节点(即如下所述的当前一个节点)的属性信息及与其它节点之间的关系信息等,并执行如下步骤303。
步骤303,根据解析到的当前一个节点的属性信息进行预操作,具体的预操作过程见上述步骤A1到A7所示,在此不进行赘述,且还需要将其中确定的待绘制文本内容储存到上述启动的缓存中。
步骤304,经过步骤303中的预操作后,需要确定待绘制的画布,并正式在画布上绘制各个节点对应元素的子图像,需要先保存画布(比如Canvas画布)的绘制状态,方便后续绘制下一个节点对应元素的子图像时恢复画布状态。
由于在绘制各个节点对应元素的子图像的过程中,可能进行画布坐标矩阵变换,剪裁区域绘制特殊效果,改变一些画布的属性值,这些调整,都会立即影响到下一个节点对应元素的子图像的绘制,因此需要在当前一个节点对应元素的子图像绘制前,保存画布当前的绘制状态(包括画布的各个属性等),然后在下一个节点对应元素的子图像绘制前恢复画布的绘制状态,这样每个节点对应元素的子图像绘制时,基于的都是画布的初始绘制状态,不会出现坐标偏差和效果偏差等。
步骤305,根据当前一个节点与其它节点之间的关系信息,确定在画布上当前一个节点对应的区域,比如是否包含在另一节点对应区域内等,然后再根据解析到的当前一个节点的属性信息在画布上绘制对应的子图像,具体方法可以如上述步骤B1到B10所述,在此不进行赘述。
其中,如果需要在画布中绘制文本,则可以从上述启动的缓存中直接获取到上述步骤303中确定的待绘制文本内容;如果需要在画布中绘制图片,则可以直接从上述启动的缓存中获取到原始图片,并根据原始图片确定出待绘制图片进行绘制。
步骤306,继续解析配置文件中下一个节点的属性信息及与其它节点的关系信息。
需要说明的是,由于本实施例中的方法是深度遍历各个节点,分享图片生成系统需要先根据解析到的关系信息判断下一节点与其它节点的关系信息,具体地,根据children属性判断下一节点包含在上述当前一个节点中,则确定下一节点在画布中的对应区域是在上述当前一个节点对应的区域内,且针对解析到的下一节点的属性信息,返回执行上述步骤303;如果判断下一节点包含在前面其它节点(当前一个节点之外的其它节点)中,确定下一节点在画布中的对应区域是在前面某一个节点对应的区域内,且针对解析到的下一节点的属性信息,并返回执行步骤303;如果判断下一节点与其它任一节点都无包含关系,则说明上述当前一个节点对应元素的子图像已经完全绘制完成,针对解析得到的下一节点的属性信息,并返回执行步骤303。
进一步地,分享图片生成系统在执行上述步骤的同时会监听整个Canvas画布中分享图片完成绘制的回调事件,因此,在执行上述步骤305之后,且在执行步骤306之前,还需要执行步骤309,即判断该回调事件是否被触发,如果是,说明配置文件中所有节点都被解析完成,则将整个Canvas画布导出为一张分享图片,并储存该分享图片;如果不是,说明配置文件中还有节点的信息未被解析出,继续执行步骤306。
可见,本实施例的分享图片生成方法可以实现如下的效果:
(1)提供一种基于深度遍历算法以快速生成小程序分享图片的方法,即通过按照顺序解析配置文件中每个节点的信息后绘制该节点对应元素的子图像,通过配置文件即可生成复杂的分享图片,从而用于好友分享和展示,大幅度降低了小程序分享图片生成的技术门槛,提升了小程序开发效率,比如原来需要2~3天开发时间生成一张复杂的分享图片,通过本方案仅需要30分钟,开发效率提升数十倍,同时本地缓存的支持,使得分享图片生成过程更快,进一步提升了小程序的用户体验。
(2)本方法中的配置文件可以采用JSON格式化,这样,数Mb大小的原始图片,可以转换成1Kb不到的JSON数据,进行传输,提升了图片传输效率,同时用JSON配置文件来描述的图片信息,还可以多次继续加工,从而生成更多的图片内容,进一步提升了原始图片的利用效率。
(3)本实施例的方法不仅仅适用于数百万的微信小程序,像大量的QQ小程序、阿里小程序、头条小程序、百度小程序等其它小程序,全都适用,这可以使得小程序整个生态的快速开发,节省时间,并且提升用户体验。进一步地,凡是使用Canvas画布技术的Web页面、程序应用和服务器系统,都可以使用该方案,从而提升整个软件系统图片生成的效率。
在具体的实施例中,如果封装在小程序插件中的配置文件的实现可以如图7所示,则在对分享图片中各个节点绘制时:
首先解析到配置文件的整体配置信息,其中width、height和filetype属性分别指示分享图片的宽度、高度和图片类型,cache属性表示需要启动缓存,则根据这些信息创建新的Canvas画布,并限定画布的宽度和高度,且启动缓存。
(1)当解析到children属性时,解析到节点1的属性信息,其中:
节点类型(type)属性为“image”表示节点1绘制的图片,url属性表示绘制的图片链接,width、height属性表示该图片绘制时的宽高,align属性表示该图片的对齐方式是顶部对齐。由于该节点1未指定left(距画布左侧距离)及top(距画布顶部距离)属性,默认left和top的值都为0,即该节点对应元素的子图像贴近Canvas画布的左侧和顶部绘制,节点1在绘制后可以如图8a中画布上方边缘加粗的矩形区域中的子图像所示。
其中,如果待绘制的图片超出绘制区域,图片比例保持不变,并按照宽高等比缩放,再结合待绘制的图片的对齐方式,如果是顶部对齐,则该待绘制图片的顶部区域完整的绘制出来,而底部区域可以被截断;如果是底部对齐,则该待绘制图片的底部区域完整的绘制出来,而顶部区域可以被截断。
(2)当解析到下一个children属性时,解析到节点2的属性信息,其中:
没有设置节点类型属性,也没有设置其它效果,这表示该节点2仅仅是绘制一个矩形区域;width、height属性表示这个矩形有多宽有多高,background属性表示该区域的背景颜色为”#efecec”;top属性表示节点对应元素的子图像离Canvas画布顶部的距离为680像素,刚好等于节点1对应子图像的高度,因此该节点2对应子图像将绘制在节点1对应子图像下方,节点2在绘制后可以如图8b中画布下方边缘加粗的矩形区域中的子图像。
由于节点2中包含了children属性,这表示在以下解析到的children属性内节点3和节点4包含在节点2中,则下述的节点3和4对应图片是在该节点2对应区域内进行绘制。
(3)当解析到下一个children属性时,解析到节点3的属性信息,其中:
节点3的type属性是“image”,表示绘制的是图片;width属性表示宽度是120像素;height属性表示是高度是120像素,即为一张正方形图片;top属性表示距节点2(即父级节点)顶部为30像素,left属性表示距节点2左侧30像素。
可以看到节点3对应的图片除了基本的属性外,还设置了boderRadius=50%,表示绘制圆角效果;border=10px solid#ffffff,表示颜色为白色的宽度为10像素的边框;boxShadow=0 0 10px#000,表示宽度为10像素的黑色阴影;rotate=-15表示逆时针旋转15°,节点3在绘制后可以如图8c中画布下方区域中的子图像。
可见,节点3对应的子图像,不仅绘制完成,还添加了圆角、边框、阴影及逆时针旋转15°的特殊效果。
(4)当解析到下一个children属性时,解析到节点4的属性信息,其中:
节点的type属性是“text”,表示绘制的是文本内容,text属性表示绘制的文本内容是“路易斯”后加;left属性表示距节点2的区域左侧为180像素,top属性表示距节点2的区域顶部为50像素,color属性表示该文本内容的颜色是“#191919”;maxWidth属性表示该文本内容的最大宽度是200像素,超过该长度则需要截断,未截断到的内容可以用省略号代替,fontSize属性表示该文本内容的字体大小是40像素,由于字体大小是40像素,最大宽度是200像素,因此该段文本中最多展示4个字(包括emoji表情),并为省略号预留一个字体的宽度。
节点3在绘制后可以如图8d和图8e中画布下方区域中的文本内容,其中图8d是在未截断表情的情况下的子图像,图8e是在截断表情的情况下的子图像。
进一步地,针对节点类型是文本时,可以设置该节点的属性信息可以包括但不限于如下表3所示的属性:
表3
以下以另一具体的应用实例来说明本发明中分享图片生成方法,本发明实施例中的分享图片生成系统主要为分布式系统100,该分布式系统可以包括客户端300及多个节点200(接入网络中的任意形式的计算设备,如服务器、用户终端),客户端300与节点200之间通过网络通信的形式连接。
以分布式系统为区块链系统为例,参见图9是本发明实施例提供的分布式系统100应用于区块链系统的一个可选的结构示意图,由多个节点200(接入网络中的任意形式的计算设备,如服务器、用户终端)和客户端300形成,节点之间形成组成的点对点(P2P,Peer ToPeer)网络,P2P协议是一个运行在传输控制协议(TCP,Transmission Control Protocol)协议之上的应用层协议。在分布式系统中,任何机器如服务器、终端都可以加入而成为节点,节点包括硬件层、中间层、操作系统层和应用层。
参见图9示出的区块链系统中各节点的功能,涉及的功能包括:
1)路由,节点具有的基本功能,用于支持节点之间的通信。
节点除具有路由功能外,还可以具有以下功能:
2)应用,用于部署在区块链中,根据实际业务需求而实现特定业务,记录实现功能相关的数据形成记录数据,在记录数据中携带数字签名以表示任务数据的来源,将记录数据发送到区块链系统中的其它节点,供其它节点在验证记录数据来源以及完整性成功时,将记录数据添加到临时区块中。
例如,应用实现的业务包括:
在本实施例中,节点中的应用还包括实现分享图片生成功能的代码,该分享图片生成功能主要包括:
获取分享图片的配置文件,所述配置文件中包括多个节点的配置信息,每个节点对应分享图片中的一个元素;解析所述配置文件中多个节点的配置信息,得到所述多个节点分别对应的属性信息及所述多个节点之间的关系信息;根据所述多个节点分别对应的属性信息及所述多个节点之间的关系信息,绘制所述多个节点对应元素的子图像,获得所述分享图片。
3)区块链,包括一系列按照产生的先后时间顺序相互接续的区块(Block),新区块一旦加入到区块链中就不会再被移除,区块中记录了区块链系统中节点提交的记录数据。
参见图10为本发明实施例提供的区块结构(Block Structure)一个可选的示意图,每个区块中包括本区块存储交易记录的哈希值(本区块的哈希值)、以及前一区块的哈希值,各区块通过哈希值连接形成区块链。另外,区块中还可以包括有区块生成时的时间戳等信息。区块链(Blockchain),本质上是一个去中心化的数据库,是一串使用密码学方法相关联产生的数据块,每一个数据块中包含了相关的信息,用于验证其信息的有效性(防伪)和生成下一个区块。
本发明实施例还提供一种分享图片生成系统,其结构示意图如图11所示,具体可以包括:
配置获取单元10,用于获取分享图片的配置文件,所述配置文件中包括多个节点的配置信息,每个节点对应分享图片中的一个元素。
解析单元11,用于解析所述配置获取单元10获取的配置文件中多个节点的配置信息,得到所述多个节点分别对应的属性信息及所述多个节点之间的关系信息。
绘制单元12,用于根据所述解析单元11解析得到的多个节点分别对应的属性信息及所述多个节点之间的关系信息,绘制所述多个节点对应元素的子图像,获得所述分享图片。
在具体实施例中,上述配置文件中还包括所述分享图片的整体配置信息;则解析单元11,还用于解析所述配置文件中的整体配置信息,得到所述分享图片的整体属性;则所述绘制单元12,具体用于根据所述分享图片的整体属性、所述多个节点分别对应的属性信息及所述多个节点之间的关系信息,所述多个节点对应元素的子图像。
其中,所述分享图片的整体属性包括如下至少一个属性:宽度、高度、是否展示加载动画、图片类型、绘制超时时间、是否启用本地缓存、本地缓存的大小和是否输出渲染日志。
需要说明的是,上述解析单元11得到的所述多个节点之间的关系信息包括一个节点与其它节点之间的关系信息,则绘制单元12在根据一个节点对应的属性信息及所述与其它节点之间的关系信息,所述一个节点对应元素的子图像时,具体用于确定待绘制的画布,根据所述一个节点与其它节点之间的关系信息,确定所述一个节点与另一节点的关系信息为:所述另一节点包含所述一个节点,确定所述画布中一个节点对应区域在另一节点对应区域内;根据所述一个节点的属性信息,在所述确定的区域内绘制所述一个节点对应元素的子图像。
其中,绘制单元12在根据所述一个节点的属性信息,在所述确定的区域内绘制所述一个节点对应元素的子图像时,具体用于根据所述一个节点的属性信息进行预操作,得到绘制所述一个节点时所用的信息;当所述一个节点的属性信息中包括旋转信息时,根据所述旋转信息将所述画布进行旋转,根据所述一个节点的属性信息在所述旋转后的画布上绘制对应的子图像,在所述旋转后的画布中一个节点对应区域在另一节点对应区域内;当所述一个节点的属性信息不包括旋转信息时,根据所述一个节点的属性信息在所述确定的区域内绘制对应的子图像。
进一步地,如果所述配置文件中还包括所述分享图片的整体配置信息,解析所述配置文件中的整体配置信息,得到所述分享图片的整体属性,所述整体属性中包括分享图片的宽度、高度及启动缓存的信息;则绘制单元12在根据所述一个节点的属性信息进行预操作,得到绘制所述一个节点时所用的信息之前,还用于根据所述分享图片的宽度和高度,确定绘制所述分享图片的画布大小;启动缓存,所述缓存用于储存绘制所述分享图片时所用的信息。
进一步地,绘制单元12在根据所述一个节点的属性信息进行预操作时,具体用于执行如下至少一个操作:当所述一个节点的属性信息包括长度信息时,将所述长度信息归一化为同一计量单位下的长度信息;当所述一个节点的属性信息包括节点类型为文本时,初始化绘制对应文本的信息;及,当所述一个节点的属性信息包括文本的最大宽度和最大行数,且文本内容中包含表情时,确定所述表情的宽度和所占字符数,根据所述表情的宽度和所占字符数及所述文本的最大宽度和最大行数,确定待绘制文本内容。
进一步地,绘制单元12在根据所述一个节点的属性信息在所述确定的区域内绘制对应的图片,具体用于当所述一个节点的属性信息中包括边框信息和背景,或包括边框信息和阴影信息时,在所述画布中一个节点对应区域内预留边框,并在预留边框后的区域绘制背景图片或绘制阴影,裁剪所述画布中一个节点对应区域且在预留的边框内绘制边框;当所述一个节点的属性信息中包括背景信息或阴影信息,且不包括边框信息时,裁剪所述画布中所述一个节点对应区域,在所述裁剪后的区域中绘制背景图片或绘制阴影。
进一步地,绘制单元12在所述裁剪后的区域中绘制背景图片或在预留边框后的区域绘制背景图片或绘制阴影之后,还用于当所述一个节点的属性信息包括圆角效果,裁剪所述画布中所述一个节点对应区域,在裁剪后的区域绘制圆角。
进一步地,绘制单元12在所述一个节点对应区域绘制圆角之后,还用于当所述一个节点的属性信息包括节点类型为图片、原始图片的大小及待绘制的图片大小时,根据所述图片的原始大小及待绘制的图片大小确定所述一个节点对应应元素的子图像在所述画布中的位置信息;根据所述位置信息在所述画布的相应位置绘制所述一个节点对应元素的子图像。
进一步地,绘制单元12,还用于当所述一个节点的属性信息包括节点类型为文本时,根据所述预操作中初始化绘制对应文本的信息及确定的所述待绘制文本内容,在所述画布中一个节点对应区域绘制相应文本内容。
可见,在本实施例的系统在生成分享图片时,配置获取单元10会获取配置文件,该配置文件包括多个节点的配置信息,每个节点对应分享图片中的一个元素,解析单元11解析该配置文件得到多个节点分别对应的属性信息和多个节点之间的关系信息,进而绘制单元12绘制多个节点对应元素的子图像,形成分享图片。在这个过程中,不需要开发用户编辑复杂的绘制分享图片的代码,比如如何在画布中绘制分享图片中各个元素的代码,只需按照配置文件中配置的分享图片中各个元素的属性等,在画布中直接绘制这些元素的子图像,使得这些子图像满足配置文件中配置的属性,整个过程花费时间较少,生成效率几乎是现有技术中生成分享图片方法的几十倍;同时由于根据配置文件绘制分享图片不受小程序类型的限制,能兼容各种类型的小程序。
本发明实施例还提供一种终端设备,其结构示意图如图12所示,该终端设备可因配置或性能不同而产生比较大的差异,可以包括一个或一个以上中央处理器(centralprocessing units,CPU)20(例如,一个或一个以上处理器)和存储器21,一个或一个以上存储应用程序221或数据222的存储介质22(例如一个或一个以上海量存储设备)。其中,存储器21和存储介质22可以是短暂存储或持久存储。存储在存储介质22的程序可以包括一个或一个以上模块(图示没标出),每个模块可以包括对终端设备中的一系列指令操作。更进一步地,中央处理器20可以设置为与存储介质22通信,在终端设备上执行存储介质22中的一系列指令操作。
具体地,在存储介质22中储存的应用程序221包括分享图片生成的应用程序,且该程序可以包括上述分享图片生成系统中的配置获取单元10,解析单元11和绘制单元12,在此不进行赘述。更进一步地,中央处理器20可以设置为与存储介质22通信,在终端设备上执行存储介质22中储存的分享图片生成的应用程序对应的一系列操作。
终端设备还可以包括一个或一个以上电源23,一个或一个以上有线或无线网络接口24,一个或一个以上输入输出接口25,和/或,一个或一个以上操作系统223,例如WindowsServerTM,Mac OS XTM,UnixTM,LinuxTM,FreeBSDTM等等。
上述方法实施例中所述的由分享图片生成系统所执行的步骤可以基于该图12所示的终端设备的结构。
本发明实施例还提供一种计算机可读存储介质,所述计算机可读存储介质储存多个计算机程序,所述计算机程序适于由处理器加载并执行如上述分享图片生成系统所执行的分享图片生成方法。
本发明实施例还提供一种终端设备,包括处理器和存储器;
所述存储器用于储存多个计算机程序,所述计算机程序用于由处理器加载并执行如上述分享图片生成系统所执行的分享图片生成方法;所述处理器,用于实现所述多个计算机程序中的各个计算机程序。
本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成,该程序可以存储于一计算机可读存储介质中,存储介质可以包括:只读存储器(ROM)、随机存取存储器(RAM)、磁盘或光盘等。
以上对本发明实施例所提供的一种分享图片生成方法、系统及存储介质和终端设备进行了详细介绍,本文中应用了具体个例对本发明的原理及实施方式进行了阐述,以上实施例的说明只是用于帮助理解本发明的方法及其核心思想;同时,对于本领域的一般技术人员,依据本发明的思想,在具体实施方式及应用范围上均会有改变之处,综上所述,本说明书内容不应理解为对本发明的限制。
Claims (14)
1.一种分享图片生成方法,其特征在于,包括:
获取分享图片的配置文件,所述配置文件中包括多个节点的配置信息,每个节点对应所述分享图片中的一个元素;
解析所述配置文件中多个节点的配置信息,得到所述多个节点分别对应的属性信息及所述多个节点之间的关系信息;
根据所述多个节点分别对应的属性信息及所述多个节点之间的关系信息,绘制所述多个节点对应元素的子图像,获得分享图片。
2.如权利要求1所述的方法,其特征在于,所述配置文件中还包括所述分享图片的整体配置信息;所述根据所述多个节点分别对应的属性信息及所述多个节点之间的关系信息,绘制所述多个节点对应元素的子图像之前,所述方法还包括:
解析所述配置文件中的整体配置信息,得到所述分享图片的整体属性;
则所述根据所述多个节点分别对应的属性信息及所述多个节点之间的关系信息,绘制所述多个节点对应元素的子图像,具体包括:根据所述分享图片的整体属性、所述多个节点分别对应的属性信息及所述多个节点之间的关系信息,绘制所述多个节点对应元素的子图像。
3.如权利要求2所述的方法,其特征在于,
所述分享图片的整体属性包括如下至少一个属性:宽度、高度、是否展示加载动画、图片类型、绘制超时时间、是否启用本地缓存、本地缓存的大小和是否输出渲染日志。
4.如权利要求1至3任一项所述的方法,其特征在于,所述多个节点之间的关系信息包括一个节点与其它节点之间的关系信息,则根据一个节点对应的属性信息及所述与其它节点之间的关系信息,绘制所述一个节点对应元素的子图像,具体包括:
确定待绘制的画布;
根据所述一个节点与其它节点之间的关系信息,确定所述一个节点与另一节点的关系信息为:所述另一节点包含所述一个节点,确定所述画布中一个节点对应区域在另一节点对应区域内;
根据所述一个节点的属性信息,在所述确定的区域内绘制所述一个节点对应元素的子图像。
5.如权利要求4所述的方法,其特征在于,所述根据所述一个节点的属性信息,在所述确定的区域内绘制所述一个节点对应元素的子图像,具体包括:
根据所述一个节点的属性信息进行预操作,得到绘制所述一个节点时所用的信息;
当所述一个节点的属性信息中包括旋转信息时,根据所述旋转信息将所述画布进行旋转,根据所述一个节点的属性信息在所述旋转后的画布上绘制对应的子图像,在所述旋转后的画布中一个节点对应区域在另一节点对应区域内。
6.如权利要求5所述的方法,其特征在于,所述配置文件中还包括所述分享图片的整体配置信息,解析所述配置文件中的整体配置信息,得到所述分享图片的整体属性,所述整体属性中包括分享图片的宽度、高度及启动缓存的信息;
则所述根据所述一个节点的属性信息进行预操作,得到绘制所述一个节点时所用的信息之前,所述方法还包括:
根据所述分享图片的宽度和高度,确定绘制所述分享图片的画布大小;
启动缓存,所述缓存用于储存绘制所述分享图片时所用的信息。
7.如权利要求5所述的方法,其特征在于,所述根据所述一个节点的属性信息进行预操作,具体包括如下至少一项操作:
当所述一个节点的属性信息包括长度信息时,将所述长度信息归一化为同一计量单位下的长度信息;
当所述一个节点的属性信息包括节点类型为文本时,初始化绘制对应文本的信息;
及,当所述一个节点的属性信息包括文本的最大宽度和最大行数,且文本内容中包含表情时,确定所述表情的宽度和所占字符数,根据所述表情的宽度和所占字符数及所述文本的最大宽度和最大行数,确定待绘制文本内容。
8.如权利要求5所述的方法,其特征在于,所述根据所述一个节点的属性信息,在所述确定的区域内绘制所述一个节点对应元素的子图像,具体包括:
当所述一个节点的属性信息中包括边框信息和背景,或包括边框信息和阴影信息时,在所述画布中一个节点对应区域内预留边框,并在预留边框后的区域绘制背景图片或绘制阴影,裁剪所述画布中一个节点对应区域且在预留的边框内绘制边框;
当所述一个节点的属性信息中包括背景信息或阴影信息,且不包括边框信息时,裁剪所述画布中所述一个节点对应区域,在所述裁剪后的区域中绘制背景图片或绘制阴影。
9.如权利要求8所述的方法,其特征在于,所述在所述裁剪后的区域中绘制背景图片或在预留边框后的区域绘制背景图片或绘制阴影之后,所述方法还包括:
当所述一个节点的属性信息包括圆角效果,裁剪所述画布中所述一个节点对应区域,在裁剪后的区域绘制圆角。
10.如权利要求9所述的方法,其特征在于,所述在裁剪后的区域绘制圆角之后,所述方法还包括:
当所述一个节点的属性信息包括节点类型为图片、原始图片的大小及待绘制的图片大小时,根据所述图片的原始大小及待绘制的图片大小确定所述一个节点对应元素的子图像在所述画布中的位置信息;
根据所述位置信息在所述画布的相应位置绘制所述一个节点对应元素的子图像。
11.如权利要求10所述的方法,其特征在于,所述方法还包括:
当所述一个节点的属性信息包括节点类型为文本时,根据所述预操作中初始化绘制对应文本的信息及确定的所述待绘制文本内容,在所述画布中一个节点对应区域绘制相应文本内容。
12.一种分享图片生成系统,其特征在于,包括:
配置获取单元,用于获取分享图片的配置文件,所述配置文件中包括多个节点的配置信息,每个节点对应所述分享图片中的一个元素;
解析单元,用于解析所述配置文件中多个节点的配置信息,得到所述多个节点分别对应的属性信息及所述多个节点之间的关系信息;
绘制单元,用于根据所述多个节点分别对应的属性信息及所述多个节点之间的关系信息,绘制所述多个节点对应元素的子图像,获得所述分享图片。
13.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质储存多个计算机程序,所述计算机程序适于由处理器加载并执行如权利要求1至11任一项所述的分享图片生成方法。
14.一种终端设备,其特征在于,包括处理器和存储器;
所述存储器用于储存多个计算机程序,所述计算机程序用于由处理器加载并执行如权利要求1至11任一项所述的分享图片生成方法;所述处理器,用于实现所述多个计算机程序中的各个计算机程序。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010842286.3A CN112052050B (zh) | 2020-08-20 | 2020-08-20 | 一种分享图片生成方法、系统及存储介质和终端设备 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010842286.3A CN112052050B (zh) | 2020-08-20 | 2020-08-20 | 一种分享图片生成方法、系统及存储介质和终端设备 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN112052050A true CN112052050A (zh) | 2020-12-08 |
CN112052050B CN112052050B (zh) | 2021-06-08 |
Family
ID=73599183
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202010842286.3A Active CN112052050B (zh) | 2020-08-20 | 2020-08-20 | 一种分享图片生成方法、系统及存储介质和终端设备 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112052050B (zh) |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112560397A (zh) * | 2020-12-24 | 2021-03-26 | 成都极米科技股份有限公司 | 绘制方法、装置、终端设备及存储介质 |
CN112634406A (zh) * | 2020-12-24 | 2021-04-09 | 北京百度网讯科技有限公司 | 生成图片的方法、装置、电子设备、存储介质和程序产品 |
CN113867605A (zh) * | 2021-09-28 | 2021-12-31 | 湖南创星科技股份有限公司 | 画布操作回退方法、装置及计算机设备及存储介质 |
Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104007967A (zh) * | 2014-05-21 | 2014-08-27 | 广州华多网络科技有限公司 | 一种基于可扩展标记语言的用户界面生成方法和装置 |
WO2015078168A1 (zh) * | 2013-11-29 | 2015-06-04 | 华为技术有限公司 | 一种人脸属性检测模型生成方法及系统 |
US9524449B2 (en) * | 2013-12-16 | 2016-12-20 | Adobe Systems Incorporated | Generation of visual pattern classes for visual pattern recognition |
CN109324836A (zh) * | 2017-07-27 | 2019-02-12 | 阿里巴巴集团控股有限公司 | 个性化图片的生成方法和装置、个性化闪屏的处理方法 |
CN109559270A (zh) * | 2018-11-06 | 2019-04-02 | 华为技术有限公司 | 一种图像处理方法及电子设备 |
CN109783102A (zh) * | 2019-01-18 | 2019-05-21 | 北京城市网邻信息技术有限公司 | 一种小程序中Canvas画布生成的方法、装置、设备和存储介质 |
CN109815424A (zh) * | 2018-12-14 | 2019-05-28 | 平安普惠企业管理有限公司 | 网页图片显示方法及终端设备 |
US10379836B2 (en) * | 2016-12-19 | 2019-08-13 | International Business Machines Corporation | Optimized creation of distributed storage and distributed processing clusters on demand |
US10678367B1 (en) * | 2015-09-11 | 2020-06-09 | Apple Inc. | Compressive touch sensing |
-
2020
- 2020-08-20 CN CN202010842286.3A patent/CN112052050B/zh active Active
Patent Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2015078168A1 (zh) * | 2013-11-29 | 2015-06-04 | 华为技术有限公司 | 一种人脸属性检测模型生成方法及系统 |
US9524449B2 (en) * | 2013-12-16 | 2016-12-20 | Adobe Systems Incorporated | Generation of visual pattern classes for visual pattern recognition |
CN104007967A (zh) * | 2014-05-21 | 2014-08-27 | 广州华多网络科技有限公司 | 一种基于可扩展标记语言的用户界面生成方法和装置 |
US10678367B1 (en) * | 2015-09-11 | 2020-06-09 | Apple Inc. | Compressive touch sensing |
US10379836B2 (en) * | 2016-12-19 | 2019-08-13 | International Business Machines Corporation | Optimized creation of distributed storage and distributed processing clusters on demand |
CN109324836A (zh) * | 2017-07-27 | 2019-02-12 | 阿里巴巴集团控股有限公司 | 个性化图片的生成方法和装置、个性化闪屏的处理方法 |
CN109559270A (zh) * | 2018-11-06 | 2019-04-02 | 华为技术有限公司 | 一种图像处理方法及电子设备 |
CN109815424A (zh) * | 2018-12-14 | 2019-05-28 | 平安普惠企业管理有限公司 | 网页图片显示方法及终端设备 |
CN109783102A (zh) * | 2019-01-18 | 2019-05-21 | 北京城市网邻信息技术有限公司 | 一种小程序中Canvas画布生成的方法、装置、设备和存储介质 |
Non-Patent Citations (2)
Title |
---|
BRUCE A. WILKIE ET AL: "The comparative recognition of monochrome and color images using networks of n-tuple and Min/Max nodes utilizing ‘grouped nodes’", 《 2013 INTERNATIONAL CONFERENCE ON APPLIED ELECTRONICS》 * |
胥鹏鹏: "基于图像拼接的助视算法研究和软件设计", 《中国优秀硕士学位论文全文数据库 工程科技Ⅱ辑》 * |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112560397A (zh) * | 2020-12-24 | 2021-03-26 | 成都极米科技股份有限公司 | 绘制方法、装置、终端设备及存储介质 |
CN112634406A (zh) * | 2020-12-24 | 2021-04-09 | 北京百度网讯科技有限公司 | 生成图片的方法、装置、电子设备、存储介质和程序产品 |
CN113867605A (zh) * | 2021-09-28 | 2021-12-31 | 湖南创星科技股份有限公司 | 画布操作回退方法、装置及计算机设备及存储介质 |
CN113867605B (zh) * | 2021-09-28 | 2022-05-27 | 湖南创星科技股份有限公司 | 画布操作回退方法、装置及计算机设备及存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN112052050B (zh) | 2021-06-08 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN112052050B (zh) | 一种分享图片生成方法、系统及存储介质和终端设备 | |
CN110458918B (zh) | 用于输出信息的方法和装置 | |
CN108010112B (zh) | 动画处理方法、装置及存储介质 | |
TWI598753B (zh) | Web page display method and web page display device based on graphic processing | |
WO2022135108A1 (zh) | 图像信号处理方法、装置、电子设备及计算机可读存储介质 | |
CN106453572B (zh) | 基于云服务器同步图像的方法及系统 | |
CN111507352B (zh) | 一种图像处理方法、装置、计算机设备以及存储介质 | |
CN112882947A (zh) | 一种界面测试方法、装置、设备及存储介质 | |
CN109325157B (zh) | 基于浏览器的地理空间信息承载方法 | |
CN111221596B (zh) | 字体渲染方法、装置及计算机可读存储介质 | |
CN112507260A (zh) | 网页加载方法及装置、电子设备、计算机可读存储介质 | |
CN113553797A (zh) | 一种端到端的风格一致的文字图像生成方法 | |
CA3040986A1 (en) | Patent analysis applications and corresponding user interface features | |
CN111741329B (zh) | 一种视频处理方法、装置、设备及存储介质 | |
CN113411664A (zh) | 基于子应用的视频处理方法、装置和计算机设备 | |
CN115641397A (zh) | 虚拟形象的合成、展示方法和系统 | |
CN117376660A (zh) | 字幕元素的渲染方法、装置、设备、介质及程序产品 | |
CN116233532A (zh) | 视频播放方法、装置、计算机设备及计算机可读存储介质 | |
CN116630552B (zh) | 面向大规模的三维流程工厂模型的优化渲染方法 | |
CN116385597B (zh) | 文本配图方法和装置 | |
CN115937338B (zh) | 图像处理方法、装置、设备及介质 | |
CN114049416A (zh) | 动画数据获取方法及装置 | |
CN115209205A (zh) | 互动动画生成、动画物料处理方法及装置 | |
CN115994282A (zh) | 切图方法和装置、电子设备及存储介质 | |
CN112068838A (zh) | 基于JSP Ueditor实现单图跨域上传及回显的方法、系统和存储介质 |
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 | ||
GR01 | Patent grant | ||
GR01 | Patent grant |