在线设计编辑器文字按需转SVG系统技术方案

本发明专利技术提供了一种在线设计编辑器字体转SVG系统，包括客户端、文本字体转SVG服务器和交互通信系统，在用户编辑字体时通过服务器端将所输入的文字根据所选择的字体参数按需转换为标准SVG，返回给浏览器或移动APP，生成的SVG只有几KB，最大几十KB，网络传输非常快，达到无需用户浏览器或移动APP加载庞大的字体文件即可以最快的速度，最小的带宽占用，实时获得统一字体显示效果。

Online design editor text on demand to SVG system

The invention provides an online editor font design SVG system, including client, server and text to SVG communication system, the users to edit font server through the input text font according to the selected parameters required is converted to the standard SVG, returned to the browser or mobile APP, generated SVG only KB, the largest dozens of KB network transmission reached very quickly, without the user browser or mobile APP loading large font file that can be the fastest speed, minimum bandwidth, real-time access to unified font display.

【技术实现步骤摘要】
在线设计编辑器文字按需转SVG系统
本专利技术属于文字编辑
，具体涉及一种在线设计编辑器字体转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使得用本文档来自技高网...

【技术保护点】
一种在线设计编辑器字体转换SVG系统，其特征在于，包括：客户端、文本字体转SVG服务器和交互通信系统，所述交互通信系统实现客户端与文本字体转SVG服务器之间的数据信息传递；所述客户端用于将客户提供的信息通过交互通讯系统传递给文本字体转SVG服务器，将服务器生成的文件返回给客户显示；所述文本字体转SVG服务器用于将文本字体转换成标准的SVG文件。

【技术特征摘要】
1.一种在线设计编辑器字体转换SVG系统，其特征在于，包括：客户端、文本字体转SVG服务器和交互通信系统，所述交互通信系统实现客户端与文本字体转SVG服务器之间的数据信息传递；所述客户端用于将客户提供的信息通过交互通讯系统传递给文本字体转SVG服务器，将服务器生成的文件返回给客户显示；所述文本字体转SVG服务器用于将文本字体转换成标准的SVG文件。2.如权利要求1所述在线设计编辑器字体转换SVG系统，其特征在于：所述客户端可以为WEB浏览器或移动APP客户端。3.如权利要求1或2所述在线设计编辑器字体转换SVG系统，其特征在于：所述文本字体SVG转换器包括node.js系统以及opentype.js系统。4.如权利要求1至3所述在线设计编辑器字体转换SVG系统，其特征在于：所述node.js系统负责建立监听服务，负责接收客户端请求、推送服务器结果。5.如权利要求1至4所述在线设计编辑器字体转换SVG系统，其特征在于：所述node.js系统非阻塞模式的IO处理结合express.js实现了高并发的在线设计编辑器字体按需转SVG的监听服务，既监听socket.io长连接的建立，又监听AJAX方式的请求。6.如权利要求1至5所述在线设计编辑器字体转换SVG系统，其特征在于：所述opentype.js系统负责将接收的文本及文本参数调用字体文件，并在字体文件中提取所需的字符，再将提取的字符按照文本字体、字号、加粗、倾斜、对齐、颜色等参数要求转换成标准SVG。7.如权利要求1至6所述在线设计编辑器字体转换SVG系统，其特征在于：所述交互通讯系统可以是SOCKET方式，也可以是AJAX方式。8.采用权利要求1至7所述系统在线设计编辑字体转SVG的方法，其特征在于，包括：第一步，通过客户端编辑文本，通过交互通讯系统实时向服务器发送请求；第二步，文本字体转SVG服务器获得客户端提交的文本及选择的字体、字号、加粗、倾斜、对其、颜色等相关信息，通过在文本字体转SVG服务器内部调用字体文件将所提交文本...

【专利技术属性】
技术研发人员：韩洪斐，王明，
申请(专利权)人：青岛创易智联网络有限公司，
类型：发明
国别省市：山东,37