在线设计编辑器文字按需转SVG系统的制作方法

文档序号:13685706阅读:1246来源:国知局

本发明属于文字编辑技术领域,具体涉及一种在线设计编辑器字体转svg系统。



背景技术:

在浏览器或移动app中实现印刷及在线宣传稿件的在线设计与编辑,因其模板化与便捷性,近几年在国内外发展迅速。而在线编辑与设计稿件免不了需要编辑文本,编辑器会提供多种字体供用户自由选择。但要在浏览器中显示不同的字体效果,特别是操作系统中默认并不自带的字体,浏览器需要完整加载所支持格式的字体之后才能渲染显示对应字体效果。

国内流行的浏览器品牌很多,且不同品牌、不同版本的浏览器对于字体的解析标准并不相同,有支持高清字体渲染的,有不支持的。在不支持字体高清渲染的浏览器下非默认字体的显示都会有毛边,影响设计美感,无法让用户直接感受到最终成稿的真实效果。

当前做的较好的国外在线设计编辑器,绝大多数只提供英文字体,英文字体因字符都在几百kb以内,所以在线加载完整字体可以很好的应对用户需求。但同样的解决方案在国内就无法适用用户需求了。用户在线编辑文本时,需要通过网络加载所需字体文件,相比只有几kb最多几百kb的英文字体,汉字字体因字符多(例如gb码字体包含6763个汉字,gbk码字体包含2万多个汉字),字体文件都比较大,小则2mb大则十几mb。在线加载这些中文字体文件往往需要几秒,带宽小的用户甚至需要十几秒的时间才能加载完所需字体,造成用户要看到字体渲染效果需要延迟等待很长时间,严重影响产品体验;另一方面因用户并不会用到字体文件中的所有字符,通常一个在线设计稿件中文字只有十几个到几百个不等,只占了所加载字体文件所有字符的0.075%-4%,也就是绝大部分的加载都是浪费的,即浪费了宝贵时间,又浪费了网络带宽资源。

当前国内做在线设计编辑器的公司,为了解决汉字字体文件大导致的网络加载有延迟、消耗网络带宽资源大的问题,提出了一些解决方案。其中一种解决方案是:将字体文件压缩,压缩为woff或woff2字体格式,可以将普通ttf字体文件压缩到60%大小,可以从一定程度上加快加载速度,节省网络带宽。但依然无法从根本上解决加载缓慢及加载浪费的问题,反而却带来了新的浏览器兼容问题,不是所有的浏览器都支持woff压缩字体格式。另外一种解决方案是:使用字蛛技术,在网页发布前,将网页中包含的所有文字及使用的字体汇总起来,从使用的字体中仅提取用到的字符,生成一个新的字体文件,这样可以极大的减小字体文件大小,提高加载速度、节省网络带宽。但这个方案最大的问题是不够灵活,仅适用于网页内容不变动的情况下,如果页面内容需要变动,需要重新汇总与提取字体字符生成新的字体文件,而这个过程是非常耗系统cpu及内存资源的,新字体文件的生成速度及对硬件资源的极大消耗又成了新的瓶颈。对于内容需要实时修改的在线设计编辑器来说,字蛛方案显然也不适合。



技术实现要素:

为克服上述技术问题,本发明提供一种在线设计编辑器字体转svg系统,在用户编辑字体时通过服务器端将所输入的文字根据所选择的字体参数按需转换为标准svg,返回给浏览器或移动app,生成的svg只有几kb,最大几十kb,网络传输非常快,达到无需用户浏览器或移动app加载庞大的字体文件即可以最快的速度,最小的带宽占用,实时获得统一字体显示效果。

基于此,本发明提供一种在线设计编辑器字体转换svg系统,包括客户端、文本字体转svg服务器和交互通信系统,

所述交互通信系统实现客户端与文本字体转svg服务器之间的数据信息传递;

所述客户端用于将客户提供的信息通过交互通讯系统传递给文本字体转svg服务器,将服务器生成的文件返回给客户显示;

所述文本字体转svg服务器用于将文本字体转换成标准的svg文件。

其中,所述客户端可以为web浏览器或移动app客户端。

其中,所述文本字体svg转换器包括node.js系统以及opentype.js系统。

其中,所述node.js系统负责建立监听服务,负责接收客户端请求、推送服务器结果。

其中,所述node.js系统非阻塞模式的io处理结合express.js实现了高并发的在线设计编辑器字体按需转svg的监听服务,既监听socket.io长连接的建立,又监听ajax方式的请求。

其中,所述opentype.js系统负责将接收的文本及文本参数调用字体文件,并在字体文件中提取所需的字符,再将提取的字符按照文本字体、字号、加粗、倾斜、对齐、颜色等参数要求转换成标准svg。

其中,所述交互通讯系统可以是socket方式,也可以是ajax方式。

本发明还提供采用上述系统在线设计编辑字体转svg的方法,其包括:

第一步,通过客户端编辑文本,通过交互通讯系统实时向服务器发送请求;

第二步,文本字体转svg服务器获得客户端提交的文本及选择的字体、字号、加粗、倾斜、对其、颜色等相关信息,通过在文本字体转svg服务器内部调用字体文件将所提交文本及字号、加粗、倾斜、对齐、颜色等参数转换成标准的svg文件,通过交互通讯系统将生成的标准svg返回给客户端;

第三步,客户端渲染显示svg用户,看到文本字体显示效果。

本发明还提供一种用于在线设计编辑字体转svg的装置/终端设备,其包括存储器、处理器以及存储在存储器中并可在所述处理器中运行的计算机程序,所述处理器执行的所述计算机程序的步骤如下,

第一步,通过客户端编辑文本,通过交互通讯系统实时向服务器发送请求;

第二步,文本字体转svg服务器获得客户端提交的文本及选择的字体、字号、加粗、倾斜、对其、颜色等相关信息,通过在文本字体转svg服务器内部从字体库调用字体文件将所提交文本及字号、加粗、倾斜、对齐、颜色等参数转换成标准的svg文件,通过交互通讯系统将生成的标准svg返回给客户端,

具体的所述文本字体svg转换器采用node.js系统以及opentype.js系统实现上述工作,

所述node.js系统负责建立监听服务,负责接收客户端请求、推送服务器结果,node.js非阻塞模式的io处理结合express.js进行高并发的在线设计编辑器字体按需转svg的监听服务,即监听socket.io长连接的建立,又监听ajax方式的请求,

所述opentype.js系统负责将接收的文本及文本参数调用字体文件,并在字体文件中提取所需的字符,再将提取的字符按照文本字体、字号、加粗、倾斜、对齐、颜色等参数要求转换成标准svg,

在这一过程中通过编程将socket.io长连接通讯功能整合到node.js服务中,客户端访问编辑器时会事先与服务器建立一个socket.io长连接,长连接建立成功后客户端可以随时发送文字生成svg的请求,服务器生成svg也通过这个长连接推送svg数据给客户端,系统同时兼容ajax方式的请求交互方式,客户端与服务器事先不建立socket.io长连接,客户端需要文字转svg时,就通过ajax方式请求服务器,服务器在响应结果中附带svg数据;

第三步,客户端渲染显示svg用户,看到文本字体显示效果。

有益的技术效果

采用本申请提供的在线设计编辑器字体转svg系统开发在线设计编辑器文本编辑功能时,无需考虑浏览器是否兼容所提供的web字体;客户端无需加载动辄几兆字节大小的字体文件;用户即使在不支持字体高清渲染的浏览器中使用在线设计编辑器也可以得到高清字体显示效果;文本转换为统一的标准svg使得用户使用在线设计编辑器设计的模板导出为pdf、图片文件,与用户在浏览器中看到的效果完全一致,不会出现排版错乱、丢字漏字等问题。

附图说明

附图1为在线设计编辑器文字转svg系统结构示意图。

具体实施方式

本发明提供一种在线设计编辑器字体转换svg系统,包括客户端、文本字体转svg服务器和交互通信系统,

所述交互通信系统实现客户端与文本字体转svg服务器之间的数据信息传递;

所述客户端用于将客户提供的信息通过交互通讯系统传递给文本字体转svg服务器,将服务器生成的文件返回给客户显示;

所述文本字体转svg服务器用于将文本字体转换成标准的svg文件。

所述客户端可以为web浏览器或移动app客户端。

所述文本字体svg转换器包括node.js系统以及opentype.js系统。

本发明还提供采用上述系统在线设计编辑字体转svg的方法,其包括:

第一步,通过客户端编辑文本,通过交互通讯系统实时向服务器发送请求;

第二步,文本字体转svg服务器获得客户端提交的文本及选择的字体、字号、加粗、倾斜、对其、颜色等相关信息,通过在文本字体转svg服务器内部调用字体文件将所提交文本及字号、加粗、倾斜、对齐、颜色等参数转换成标准的svg文件,通过交互通讯系统将生成的标准svg返回给客户端;

第三步,客户端渲染显示svg用户,看到文本字体显示效果。

所述node.js系统负责建立监听服务,负责接收客户端请求、推送服务器结果,node.js非阻塞模式的io处理给node.js带来在相对低系统资源耗用下的高性能与出众的负载能力,结合express.js实现了高并发的在线设计编辑器字体按需转svg的监听服务,即监听socket.io长连接的建立,又监听ajax方式的请求。

所述opentype.js系统负责将接收的文本及文本参数调用字体文件,并在字体文件中提取所需的字符,再将提取的字符按照文本字体、字号、加粗、倾斜、对齐、颜色等参数要求转换成标准svg,opentype.js支持读取ttf、otf、woff三种格式的字体,通过逻辑代码将opentype.js嵌入到node.js服务中,与node.js服务一并启动,node.js接收到用户文本请求可以无延时调用opentype.js程序生成svg。

所述交互通讯系统,可以是socket方式,也可以是ajax方式;我们首选socket方式,因是长连接交互延迟更小,且支持双向通讯业务部署更灵活。通过编程将socket.io长连接通讯功能整合到node.js服务中,客户端访问编辑器时会事先与服务器建立一个socket.io长连接,长连接建立成功后客户端可以随时发送文字生成svg的请求,服务器生成svg也通过这个长连接推送svg数据给客户端,系统同时兼容ajax方式的请求交互方式,客户端与服务器事先不建立socket.io长连接,客户端需要文字转svg时,就通过ajax方式请求服务器,服务器在响应结果中附带svg数据。

本发明还提供一种用于在线设计编辑字体转svg的装置/终端设备,其包括存储器、处理器以及存储在存储器中并可在所述处理器中运行的计算机程序,所述处理器执行的所述计算机程序的步骤如下,

第一步,通过客户端编辑文本,通过交互通讯系统实时向服务器发送请求;

第二步,文本字体转svg服务器获得客户端提交的文本及选择的字体、字号、加粗、倾斜、对其、颜色等相关信息,通过在文本字体转svg服务器内部从字体库调用字体文件将所提交文本及字号、加粗、倾斜、对齐、颜色等参数转换成标准的svg文件,通过交互通讯系统将生成的标准svg返回给客户端,

具体的所述文本字体svg转换器采用node.js系统以及opentype.js系统实现上述工作,

所述node.js系统负责建立监听服务,负责接收客户端请求、推送服务器结果,node.js非阻塞模式的io处理结合express.js进行高并发的在线设计编辑器字体按需转svg的监听服务,即监听socket.io长连接的建立,又监听ajax方式的请求,

所述opentype.js系统负责将接收的文本及文本参数调用字体文件,并在字体文件中提取所需的字符,再将提取的字符按照文本字体、字号、加粗、倾斜、对齐、颜色等参数要求转换成标准svg,

在这一过程中通过编程将socket.io长连接通讯功能整合到node.js服务中,客户端访问编辑器时会事先与服务器建立一个socket.io长连接,长连接建立成功后客户端可以随时发送文字生成svg的请求,服务器生成svg也通过这个长连接推送svg数据给客户端,系统同时兼容ajax方式的请求交互方式,客户端与服务器事先不建立socket.io长连接,客户端需要文字转svg时,就通过ajax方式请求服务器,服务器在响应结果中附带svg数据;

第三步,客户端渲染显示svg用户,看到文本字体显示效果。

以下采用实施例和附图来详细说明本发明的实施方式,借此对本发明如何应用技术手段来解决技术问题,并达成技术效果的实现过程能充分理解并据以实施。

如图1所示,本发明提供的线设计编辑器字体转换svg系统,包括客户端、文本字体转svg服务器和交互通信系统,所述客户端可以为web浏览器或移动app客户端,所述文本字体svg转换器包括node.js系统以及opentype.js系统。

通过客户端编辑文本,通过交互通讯系统实时向服务器发送请求;文本字体转svg服务器的所述node.js系统负责建立监听服务,负责接收客户端请求、推送服务器结果,node.js非阻塞模式的io处理结合express.js进行高并发的在线设计编辑器字体按需转svg的监听服务,即监听socket.io长连接的建立,又监听ajax方式的请求,所述opentype.js系统负责将接收的文本及文本参数调用字体文件,并在字体文件中提取所需的字符,再将提取的字符按照文本字体、字号、加粗、倾斜、对齐、颜色等参数要求转换成标准svg,通过编程将socket.io长连接通讯功能整合到node.js服务中,客户端访问编辑器时会事先与服务器建立一个socket.io长连接,长连接建立成功后客户端可以随时发送文字生成svg的请求,服务器生成svg也通过这个长连接推送svg数据给客户端,系统同时兼容ajax方式的请求交互方式,客户端与服务器事先不建立socket.io长连接,客户端需要文字转svg时,就通过ajax方式请求服务器,服务器在响应结果中附带svg数据,客户端渲染显示svg用户,看到文本字体显示效果。

所有上述的首要实施这一知识产权,并没有设定限制其他形式的实施这种新产品和/或新方法。本领域技术人员将利用这一重要信息,上述内容修改,以实现类似的执行情况。但是,所有修改或改造基于本发明新产品属于保留的权利。

以上所述,仅是本发明的较佳实施例而已,并非是对本发明作其它形式的限制,任何熟悉本专业的技术人员可能利用上述揭示的技术内容加以变更或改型为等同变化的等效实施例。但是凡是未脱离本发明技术方案内容,依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化与改型,仍属于本发明技术方案的保护范围。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1