一种艺术字的渲染方法、设备及介质技术

本发明专利技术公开了一种艺术字的渲染方法、设备及介质，属于图像处理技术领域，用于解决现有的网页设计过程中，对于图片形式的艺术字字体文件无法将其作为字体渲染到页面中的技术问题。方法包括：确定待渲染图像，并获取待渲染图像中的字符；将所述字符按照渲染顺序进行排序后转换为字符串格式，并将得到的字符串继续转换为本地字符串，所述本地字符串由所述字符串添加分隔符得到；遍历所述本地字符串，获取所述本地字符串中每一位对应的图像路径信息与分隔符判断信息，并将所述图像路径信息与所述分隔符判断信息包装成每一位的属性信息后，依次添加至渲染数组中；对所述渲染数组中的元素依次进行动态渲染。依次进行动态渲染。依次进行动态渲染。

【技术实现步骤摘要】
一种艺术字的渲染方法、设备及介质


[0001]本申请涉及图像处理
，尤其涉及一种艺术字的渲染方法、设备及介质。

技术介绍

[0002]随着网页设计的不断发展，对网页设计的美观度也提出了更高的要求。设计人员在对网页进行设计时，通常会使用到艺术字，这些艺术字通常以艺术字文件的形式存储在网页设计的后台文件库中，便于设计人员的调取使用。
[0003]但由于艺术字文件的多样性有限，同时设计人员为了增加页面的美观度，会寻找一些符合设计美观需求的艺术字图片，试图将其插入网页中，但目前这些图片形式的艺术字无法作为字体添加到网页中，给设计人员带来了新的难题。

技术实现思路

[0004]本申请实施例提供了一种艺术字的渲染方法、设备及介质，用于解决如下技术问题：现有的网页设计过程中，对于图片形式的艺术字字体文件无法将其作为字体渲染到页面中。
[0005]本申请实施例采用下述技术方案：
[0006]第一方面，本申请实施例提供了一种艺术字的渲染方法，所述方法包括：确定待渲染图像，并获取待渲染图像中的字符；将所述字符按照渲染顺序进行排序后转换为字符串格式，并将得到的字符串继续转换为本地字符串，所述本地字符串由所述字符串添加分隔符得到；遍历所述本地字符串，获取所述本地字符串中每一位对应的图像路径信息与分隔符判断信息，并将所述图像路径信息与所述分隔符判断信息包装成每一位的属性信息后，依次添加至渲染数组中；对所述渲染数组中的元素依次进行动态渲染。
[0007]在本申请说明书的一个或多个实施例中，在确定待渲染图像之后，所述方法还包括：定义DOM文档；将所述待渲染图像中的字符按照渲染顺序添加至所述DOM文档中。
[0008]在本申请说明书的一个或多个实施例中，定义DOM文档之后，所述方法还包括：确定所述字符串的长度L，并确定在所述字符串中添加的分隔符的数量N；获取所述待渲染图像的宽度D1以及所述分隔符的宽度D2；通过以下公式确定所述DOM文档的宽度D：
[0009]D＝L*D1+N*D2
[0010]将所述宽度D加上单位后绑定到所述DOM文档中。
[0011]在本申请说明书的一个或多个实施例中，，所述方法还包括：利用Node JS中提供的to String()函数，将所述字符转换为字符串格式；利用Node JS中提供的to Local String()函数，将所述字符串转换为本地字符串，所述本地字符串为添加了千位分隔符的所述字符串。
[0012]在本申请说明书的一个或多个实施例中，得到本地字符串之后，所述方法还包括：确定所述本地字符串的长度；将所述本地字符串长度与所述字符串的长度之间的差值确定为所述分隔符的数量。
[0013]在本申请说明书的一个或多个实施例中，将所述属性信息添加至渲染数组中，具体包括：通过Node JS中提供的push()函数将所述属性信息存储至所述渲染数组中。
[0014]在本申请说明书的一个或多个实施例中，对所述渲染数组中的元素依次进行动态渲染，具体包括：使用Node JS中提供的require方法，通过所述图像路径信息请求所述待渲染图像；将所述待渲染图像实时渲染至网页上。
[0015]在本申请说明书的一个或多个实施例中，对所述渲染数组中的元素依次进行动态渲染，具体还包括：读取所述分隔符判断信息的取值，并在所述取值为1时，在所述网页上实时渲染分隔符。
[0016]第二方面，本申请实施例还提供了一种艺术字的渲染设备，所述设备包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有能够被所述至少一个处理器执行的指令，以使所述至少一个处理器能够执行如上述的一种艺术字的渲染方法。
[0017]第三方面，本申请实施例还提供了一种非易失性计算机存储介质，其上存储有计算机可执行指令，所述计算机可执行指令被设置为执行如上述的一种艺术字的渲染方法。
[0018]本申请实施例提供的一种艺术字的渲染方法、设备及介质，具有以下有益效果：通过将待渲染的艺术字图像中的字符按照渲染顺序添加到DOM文档中，之后将其转换为字符串格式并继续转换为本地字符串，通过本地字符串中的每一位对应的图片路径信息与分隔符判断信息，将本地字符串构建为渲染数组，对渲染数组中的每个元素依次动态渲染到网页上，从而实现将图片形式的艺术字作为字体渲染到网页上，为网页设计的美观度与字体多样性带来贡献。
附图说明
[0019]为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：
[0020]图1为本申请实施例提供的一种艺术字的渲染方法流程图；
[0021]图2为本申请实施例提供的一种应用场景下，艺术字图片的命名示意图；
[0022]图3为本申请实施例提供的一种应用场景下，艺术字的渲染效果图；
[0023]图4为本申请实施例提供的一种艺术字的渲染设备的结构示意图。
具体实施方式
[0024]为了使本
的人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本说明书实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。
[0025]本申请实施例提供了一种艺术字的渲染方法、设备及介质，实现了在缺乏艺术字字体文件的情况下，也能进行艺术字的渲染。
[0026]下面通过附图对本申请实施例中的方法进行详细说明。
[0027]图1为本申请实施例提供的一种艺术字的渲染方法流程图，如图1所示，本申请实施例中的艺术字渲染方法至少包括以下执行步骤：
[0028]步骤101、确定待渲染图像，并获取待渲染图像中的字符。
[0029]待渲染图像指的是需要在网页中展示为字体的艺术字图片，这些待渲染图像一般在网页设计时就被选定好了，只需要通过本申请实施例中的方法进行渲染即可。之后，需要将待渲染图片中的字符提取/读取出来，以数字图片为例，可以将各个待渲染图片中的数字内容，读取出来，该过程可以通过现有的图像识别技术实现，本申请实施例对此不做限定。
[0030]在本申请的一个示例中，在得到待渲染图像之后，可以定义一个DOM文档，DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。该DOM文档用于承载前述待渲染图像中的字符。
[0031]步骤102、将字符按照渲染顺序进行排序后转换为字符串格式，并将得到的字符串继续转换为本地字符串。
[0032]渲染顺序指的是前述字符在网页页面上最终的显示顺序，该顺序也是在网页设计之前就确定好的，获取该顺序之后，将前述本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种艺术字的渲染方法，其特征在于，所述方法包括：确定待渲染图像，并获取待渲染图像中的字符；将所述字符按照渲染顺序进行排序后转换为字符串格式，并将得到的字符串继续转换为本地字符串，所述本地字符串由所述字符串添加分隔符得到；遍历所述本地字符串，获取所述本地字符串中每一位对应的图像路径信息与分隔符判断信息，并将所述图像路径信息与所述分隔符判断信息包装成每一位的属性信息后，依次添加至渲染数组中；对所述渲染数组中的元素依次进行动态渲染。2.根据权利要求1所述的一种艺术字的渲染方法，其特征在于，在确定待渲染图像之后，所述方法还包括：定义DOM文档；将所述待渲染图像中的字符按照渲染顺序添加至所述DOM文档中。3.根据权利要求2所述的一种艺术字的渲染方法，其特征在于，定义DOM文档之后，所述方法还包括：确定所述字符串的长度L，并确定在所述字符串中添加的分隔符的数量N；获取所述待渲染图像的宽度D1以及所述分隔符的宽度D2；通过以下公式确定所述DOM文档的宽度D：D＝L*D1+N*D2将所述宽度D加上单位后绑定到所述DOM文档中。4.根据权利要求1所述的一种艺术字的渲染方法，其特征在于，所述方法还包括：利用Node JS中提供的to String()函数，将所述字符转换为字符串格式；利用Node JS中提供的to Local String()函数，将所述字符串转换为本地字符串，所述本地字符串为添加了千位分隔符的所述字符串。5.根据权利要求4所述的一...

【专利技术属性】
技术研发人员：刘浩宇，
申请(专利权)人：浪潮山东农业互联网有限公司，
类型：发明
国别省市：