CN111915705B - 图片可视化编辑方法、装置、设备和介质 - Google Patents

Abstract

本发明实施例公开了一种图片可视化编辑方法、装置、设备和介质，涉及图片编辑领域。该方法包括：响应于可视化编辑请求，若用户输入编辑区的元素为文字元素，则根据所述文字元素和所述文字元素的样式信息生成文字图片；根据所述文字图片，对所述编辑区中可见的文字元素进行渲染和显示；响应用户对编辑区的下载操作，向服务端发送包括所述文字图片的下载请求，指示服务端基于所述文字图片对编辑区的文字元素进行渲染，生成目标编辑图片。本发明实施例提供了一种图片可视化编辑方法、装置、设备和介质，实现来往在客户端浏览器渲染显示的文字的渲染效果与服务端渲染生成的文字的渲染效果一致，以及实现对任意尺寸和任意数量的图片的生成。

Description

图片可视化编辑方法、装置、设备和介质

技术领域

本发明实施例涉及图片编辑领域，尤其涉及一种图片可视化编辑方法、装置、设备和介质。

背景技术

目前在页面可视化编辑领域，需要用户在编辑页面中将不同的元素拖拽至编辑区，进而由编辑区域的各元素生成一个目标网页。目标网页可以是一个页面，也可以是一个图片广告物料。用户可以将目标网页以图片形式下载下来，用作目标网页的预览图片。

当前，对编辑页面中编辑区的内容进行图片生成的方法有：

(1)使用Phantomjs(一个基于webkit的JavaScript API)或者headless Chrome方法实现，该方法包括：

用户在编辑区编辑目标页面的内容，直到用户满意为止。此时在客户端的浏览器中生成有表示目标页面内容的html(超文本标记语言)代码。

服务端收到浏览器发送的目标页面内容后会在服务端生成html代码。然后服务端对所生成的html代码使用Phantomjs或者headless Chrome进行渲染，渲染以后得到所对应的图片，然后将图片保存在对象存储，数据库或者文件系统中。

(2)使用html2Canvas方案将浏览器中的html代码直接转换为Canvas画板，然后使用Canvas技术在浏览器中直接截图，使用浏览器中生成的图片发送给服务端，服务端将浏览器生成的图片进行保存。

上述两种方案都有各自的不足和局限性：

方案(1)用户在Windows或者Mac系统的浏览器中操作。但是图片的生成是在服务端生成的，常见的服务端都是基于Linux操作系统。由于不同操作系统字体渲染引擎的差异，会导致实际生成的图片与用户在浏览器中看到的图片不一致的问题。参见图1a，通过浏览器的预览效果为：编辑页面100中包括编辑区110，编辑区110中包括文字元素“开户赠送2888元”。参见图1b，在服务端生成的图片中文字“元”被截断。

方案(2)该方案虽然能生成与浏览器中一致的图片，但是html转Canvas的方案只能对浏览器的屏幕可见区域进行截图(类似基于聊天工具的截图)，如果页面内容超过了屏幕的可见区域，或者有多个页面内容需要截图的时候，该方案就失效了。

发明内容

本发明实施例提供一种图片可视化编辑方法、装置、设备和介质，以实现在客户端浏览器渲染显示的文字的渲染效果与服务端渲染生成的文字的渲染效果一致，以及实现对任意尺寸和任意数量的图片的生成。

第一方面，本发明实施例提供了一种图片可视化编辑方法，应用于客户端，该方法包括：

响应于可视化编辑请求，若用户输入编辑区的元素为文字元素，则根据所述文字元素和所述文字元素的样式信息生成文字图片；

根据所述文字图片，对所述编辑区中可见的文字元素进行渲染和显示；

响应用户对编辑区的下载操作，向服务端发送包括所述文字图片的下载请求，指示服务端基于所述文字图片对编辑区的文字元素进行渲染，生成目标编辑图片。

第二方面，本发明实施例还提供了一种图片可视化编辑装置，应用于客户端，该装置包括：

图片生成模块，用于响应于可视化编辑请求，若用户输入编辑区的元素为文字元素，则根据所述文字元素和所述文字元素的样式信息生成文字图片；

文字渲染模块，用于根据所述文字图片，对所述编辑区中可见的文字元素进行渲染和显示；

图片下载模块，用于响应用户对编辑区的下载操作，向服务端发送包括所述文字图片的下载请求，指示服务端基于所述文字图片对编辑区的文字元素进行渲染，生成目标编辑图片。

第三方面，本发明实施例还提供了一种图片可视化编辑方法，应用于服务端，该方法包括：

接收客户端发送的包括文字图片的下载请求，其中所述客户端根据所述文字图片，对编辑区中可见的文字元素进行渲染和显示；

基于所述文字图片对编辑区的文字元素进行渲染，生成目标编辑图片。

第四方面，本发明实施例还提供了一种图片可视化编辑装置，应用于服务端，该装置包括：

请求接收模块，用于接收客户端发送的包括文字图片的下载请求，其中所述客户端根据所述文字图片，对编辑区中可见的文字元素进行渲染和显示；

图片生成模块，用于基于所述文字图片对编辑区的文字元素进行渲染，生成目标编辑图片。

第五方面，本发明实施例还提供了一种设备，所述设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本发明实施例中任一所述的图片可视化编辑方法。

第六方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明实施例中任一所述的图片可视化编辑方法。

本发明实施例通过将用户输入编辑页面中编辑区的文字元素转换为文字图片。客户端基于文字图片对编辑区中可见的文字元素进行渲染显示，服务端基于文字图片对编辑区中文字元素进行渲染，生成目标编辑图片。

这样不管在客户端中显示还是在服务端进行目标编辑图片生成时，文字都已经转变为了图片。而图片本身是具有跨平台一致的特性，所以不会出现客户端中显示的图片和服务器端生成的图片中对文字的展示不一致的问题。

此外，服务端可以对至少一个编辑区中的各元素进行渲染，生成至少一个目标编辑图片。从而可以实现对任意尺寸和数量的图片的生成。

附图说明

图1a为现有技术中页面可视化编辑的显示效果示意图；

图1b为现有技术中经页面可视化编辑编辑后存储图片的示意图；

图2为本发明实施例一提供的一种图片可视化编辑方法的流程图；

图3是本发明实施例二提供的一种图片可视化编辑方法的流程图；

图4是本发明实施例三提供的一种图片可视化编辑装置的结构示意图；

图5是本发明实施例四提供的一种图片可视化编辑方法的流程图；

图6是本发明实施例五提供的一种图片可视化编辑方法的流程图；

图7是本发明实施例五提供的文字图片的绘制流程示意图；

图8是本发明实施例六提供的一种图片可视化编辑装置的结构示意图；

图9为本发明实施例七提供的一种设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

在实现本发明的过程中，发明人发现页面可视化编辑方案也可以应用在信息投放领域，用户可以在网页上拖拽不同的文字元素和/或图片元素至编辑区，生成目标图片。然后用户可以将目标图片下载下来，用作信息投放时的图片信息物料。

实施例一

图2为本发明实施例一提供的一种图片可视化编辑方法的流程图。本实施例可适用于对图片进行可视化编辑和保存的情况，该图片可以是任意可编辑的图片。示例性地，该图片可以是页面预览图片，也可以是图片信息物料。典型地，本实施例可适用于基于客户端浏览器，对图片进行可视化编辑的情况。

该方法可以由一种图片可视化编辑装置来执行，该装置可以有软件和/或硬件的方式实现。典型地，该装置可以是客户终端。参见图2，本实施例提供的图片可视化编辑方法包括：

S110、响应于可视化编辑请求，若用户输入编辑区的元素为文字元素，则根据所述文字元素和所述文字元素的样式信息生成文字图片。

其中，可视化编辑请求是用户触发的用于根据需要进行图片可视化编辑的请求。

可视化编辑请求的触发方式可以通过按键触发，也可以通过设定操作触发，其中设定操作可以是拖拽操作或点击操作。本实施例对此不做任何限定。

编辑区是可视化编辑的编辑页面中的一块区域，用于对输入的各元素进行编辑、修改和排版等工作。其中各元素可以包括：文字元素、图片元素和SVG元素中的至少一种。

图片元素可以包括logo(标志)图片和装饰图片。

所述文字元素的样式信息可以包括：斜体、加粗、字体类型、阴影效果和字体颜色等。

客户端可以基于预先确定的绘制算法，根据所述文字元素和所述文字元素的样式信息，绘制文字图片。

S120、根据所述文字图片，对所述编辑区中可见的文字元素进行渲染和显示。

其中，所述文字图片数量可以是一个、两个或更多。

可见的文字元素是用户通过屏幕可以看见的文字关联的文字元素。

可选地，可以仅根据所述文字图片对所述编辑区中可见的文字元素进行渲染和显示。

为实现对编辑效果的查看，可以根据所述文字图片和编辑区中除文字元素以外的其他元素，对编辑区中可见的区域进行渲染和显示。

为节约渲染机制的开发成本，所述对所述编辑区中可见的文字元素进行渲染,包括:

基于客户端浏览器内核的渲染机制，对所述编辑区所属页面的可见区域进行渲染，其中所述客户端浏览器内核的渲染机制与服务端浏览器内核的渲染机制不同。

其中，客户端浏览器内核的渲染机制是客户端操作系统自带的，因此无需开发成本。

可见区域，是页面中通过屏幕可以看见的区域。

因为不同的操作系统中浏览器内核的渲染机制不同。如果所述客户端浏览器内核的渲染机制与服务端浏览器内核的渲染机制不同，那么客户端和服务端所用的操作系统也不同。

若编辑区存在除所述文字元素以外的其他元素，且所述其他元素位于可见区域，则所述对所述编辑区中可见的文字元素进行渲染，包括：

根据所述文字图片和所述其他元素，对所述编辑区进行渲染。

通过该步骤，用户可以查看编辑区内各元素的排版效果。根据查看结果，用户可进一步编辑，直到用户满意为止。

S130、响应用户对编辑区的下载操作，向服务端发送包括所述文字图片的下载请求，指示服务端基于所述文字图片对编辑区的文字元素进行渲染，生成目标编辑图片。

其中，目标编辑图片是由编辑区中各元素编辑出的满足用户需求的图片。该图片中可以只包括文字。为使目标编辑图片具有更丰富的视觉效果。典型地，该图片中还包括图片。

在用户对编辑区的排版效果满意后，可以执行下载操作，以生成具有排版效果的目标编辑图片。

可选地，所述响应用户对编辑区的下载操作，向服务端发送包括所述文字图片的下载请求，包括：

响应用户对编辑区的下载操作，若编辑区存在除所述文字元素以外的其他元素，则向服务端发送包括所述文字图片和所述其他元素的下载请求，指示服务端基于所述文字图片和所述其他元素，对编辑区中的各元素进行渲染，生成目标编辑图片。

本发明实施例的技术方案，通过将用户输入编辑页面中编辑区的文字元素转换为文字图片。客户端基于文字图片对编辑区中可见的文字元素进行渲染显示，服务端基于文字图片对编辑区中文字元素进行渲染，生成目标编辑图片。

这样不管在客户端中显示还是在服务端进行目标编辑图片生成时，文字都已经转变为了图片。而图片本身是具有跨平台一致的特性，所以不会出现客户端中显示的图片和服务器端生成的图片中对文字的展示不一致的问题。

此外，服务端可以对至少一个编辑区中的各元素进行渲染，生成至少一个目标编辑图片。从而可以实现对任意尺寸和数量的图片的生成。

实施例二

图3是本发明实施例二提供的一种图片可视化编辑方法的流程图。本实施例是在上述实施例的基础上提出的一种可选方案。参见图3，本实施例提供的可视化编辑方法包括：

S210、响应于可视化编辑请求，若用户输入编辑区的元素为文字元素，则根据所述文字元素和所述文字元素的样式信息生成转图请求。

S220、向服务端发送所述转图请求，指示服务端根据所述转图请求中的文字元素和文字元素的样式信息绘制文字图片。

S230、接收服务端反馈的文字图片。

S240、根据所述文字图片，对所述编辑区中可见的文字元素进行渲染和显示。

S250、响应用户对编辑区的下载操作，向服务端发送包括所述文字图片的下载请求，指示服务端基于所述文字图片对编辑区的文字元素进行渲染，生成目标编辑图片。

本发明实施例的技术方案，通过发送转图请求给服务端，指示服务端将文字元素转换为文字图片。从而减少客户端的压力。

需要说明的是，经过本实施例的技术教导，本领域技术人员有动机将上述实施例中描述的任一种实施方式进行方案的组合，以实现对图片的可视化编辑。

实施例三

图4是本发明实施例三提供的一种图片可视化编辑装置的结构示意图。典型地，该装置可以是客户端所属终端。参见图4，本实施例提供的图片可视化编辑装置包括：图片生成模块10、文字渲染模块20和图片下载模块30。

其中，图片生成模块10，用于响应于可视化编辑请求，若用户输入编辑区的元素为文字元素，则根据所述文字元素和所述文字元素的样式信息生成文字图片；

文字渲染模块20，用于根据所述文字图片，对所述编辑区中可见的文字元素进行渲染和显示；

图片下载模块30，用于响应用户对编辑区的下载操作，向服务端发送包括所述文字图片的下载请求，指示服务端基于所述文字图片对编辑区的文字元素进行渲染，生成目标编辑图片。

本发明实施例的技术方案，通过将用户输入编辑页面中编辑区的文字元素转换为文字图片。客户端基于文字图片对编辑区中可见的文字元素进行渲染显示，服务端基于文字图片对编辑区中文字元素进行渲染，生成目标编辑图片。

这样不管在客户端中显示还是在服务端进行目标编辑图片生成时，文字都已经转变为了图片。而图片本身是具有跨平台一致的特性，所以不会出现客户端中显示的图片和服务器端生成的图片中对文字的展示不一致的问题。

此外，服务端可以对至少一个编辑区中的各元素进行渲染，生成至少一个目标编辑图片。从而可以实现对任意尺寸和数量的图片的生成。

进一步地，所述图片生成模块，包括：请求生成单元、请求发送单元和图片接收单元。

其中，请求生成单元，用于根据所述文字元素和所述文字元素的样式信息生成转图请求；

请求发送单元，用于向服务端发送所述转图请求，指示服务端根据所述转图请求中的文字元素和文字元素的样式信息绘制文字图片；

图片接收单元，用于接收服务端反馈的文字图片。

进一步地，所述文字渲染模块,包括:文字渲染单元。

其中，文字渲染单元，用于基于客户端浏览器内核的渲染机制，对所述编辑区所属页面的可见区域进行渲染，其中所述客户端浏览器内核的渲染机制与服务端浏览器内核的渲染机制不同。

进一步地，所述图片下载模块，包括：图片下载单元。

其中，图片下载单元，用于响应用户对编辑区的下载操作，若编辑区存在除所述文字元素以外的其他元素，则向服务端发送包括所述文字图片和所述其他元素的下载请求，指示服务端基于所述文字图片和所述其他元素，对编辑区中的各元素进行渲染，生成目标编辑图片。

本发明实施例所提供的图片可视化编辑装置可执行本发明任意实施例所提供的图片可视化编辑方法，具备执行方法相应的功能模块和有益效果。

实施例四

图5是本发明实施例四提供的一种图片可视化编辑方法的流程图。本实施例可适用于对图片进行可视化编辑和保存的情况，该图片可以是任意可编辑的图片。示例性地，该图片可以是页面预览图片，也可以是图片信息物料。典型地，本实施例可适用于基于服务端，对编辑的各元素图片进行图片生成的情况。

该方法可以由一种图片可视化编辑装置来执行，该装置可以有软件和/或硬件的方式实现。典型地，该装置可以是服务器。参见图5，本实施例提供的图片可视化编辑方法包括：

S310、接收客户端发送的包括文字图片的下载请求，其中所述客户端根据所述文字图片，对编辑区中可见的文字元素进行渲染和显示。

其中，文字图片是根据编辑区内的文字元素绘制的图片。

下载请求是对编辑区内各元素进行渲染，生成完整的目标编辑图片的请求。

下载请求由客户端响应用户操作生成。

S320、基于所述文字图片对编辑区的文字元素进行渲染，生成目标编辑图片。

其中，目标编辑图片是由编辑区中各元素编辑出的满足用户需求的图片。该图片中可以只包括文字。为使目标编辑图片具有更丰富的视觉效果。典型地，该图片中还包括图片。

服务端可以根据预设的渲染机制，基于所述文字图片对编辑区的文字元素进行渲染，生成目标编辑图片。

为节省对预设的渲染机制的开发成本，所述基于所述文字图片对编辑区的文字元素进行渲染，包括：

基于服务端浏览器内核的渲染机制和所述文字图片，对编辑区的文字元素进行渲染，其中所述服务端浏览器内核的渲染机制与客户端浏览器内核的渲染机制不同。

其中，服务端浏览器内核的渲染机制是服务端操作系统自带的，因此无需开发成本。

所述服务端浏览器内核的渲染机制与客户端浏览器内核的渲染机制不同。因此，所述服务端的操作系统页不同于客户端的操作系统。

为实现对编辑区中包括的多种元素进行渲染，若编辑区存在除所述文字元素以外的其他元素，则接收客户端发送的包括文字图片的下载请求，包括：

接收客户端发送的包括所述文字图片和所述其他元素的下载请求；

基于所述文字图片和所述其他元素，对编辑区中的各元素进行渲染，生成目标编辑图片。

本实施例中出现的与上述实施例相同概念的解释也相同，本实施例不再赘述。

本发明实施例的技术方案，通过基于文字图片，利用客户端对编辑区的文字元素进行显示，利用服务端对编辑区的文字元素进行图片的生成。而图片本身是具有跨平台一致的特性，所以不会出现客户端中显示的图片和服务器端生成的图片中对文字的展示不一致的问题。

此外，服务端可以对至少一个编辑区中的各元素进行渲染，生成至少一个目标编辑图片。从而可以实现对任意尺寸和数量的图片的生成。

实施例五

图6是本发明实施例五提供的一种图片可视化编辑方法的流程图。本实施例是在上述实施例的基础上提出一种可选方案。参见图6，本实施例提供的图片可视化编辑方法包括：

S410、获取由客户端发送的转图请求。

S420、根据所述转图请求中的文字元素和文字元素的样式信息绘制文字图片。

具体地，所述根据所述转图请求中的文字元素和文字元素的样式信息绘制文字图片，包括：

根据所述转图请求中的文字元素和文字元素的样式信息，采用客户端浏览器内核的渲染机制对文字的渲染效果，绘制文字图片。

也即模拟客户端浏览器内核的渲染机制对文字的渲染效果，绘制文字图片。模拟客户端浏览器内核的渲染机制对文字的渲染效果的目的是：使得文字图片的显示效果与基于客户端浏览器内核的渲染机制对文字元素的渲染效果相近。

可选地，也可以基于服务端浏览器内核的渲染机制，根据转图请求中的文字元素和文字元素的样式信息，绘制文字图片。

但是，发明人在实现本发明的过程中发现，基于服务端浏览器内核的渲染机制对文字图片的绘制效率较低，从而降低了客户端对文字元素的渲染和显示效率。

为解决该问题，采用客户端浏览器内核的渲染机制对文字的渲染效果，绘制文字图片，包括：

基于编译性语言和客户端浏览器内核的渲染机制中文字渲染参数，对所述文字元素进行绘制，生成文字图片。

其中，编译语言可以是c语言或c++语言。浏览器内核的渲染机制通常基于解释性语言编写的。

又因为编译型语言写的程序执行之前，需要一个专门的编译过程，把程序编译成为机器语言的文件，比如exe文件，以后要运行的话就不用重新翻译了，直接使用编译的结果就行了，因为翻译只做了一次，运行时不需要翻译，所以编译型语言的程序执行效率高。从而可以提高文字图片的生成效率。

具体地，客户端浏览器内核的渲染机制中文字渲染参数可以包括：纵坐标确定系数和字体倾斜度中的至少一种。

S430、向客户端反馈绘制的文字图片。

S440、接收客户端发送的包括文字图片的下载请求。

其中，所述客户端根据所述文字图片，对编辑区中可见的文字元素进行渲染和显示。

S450、基于所述文字图片对编辑区的文字元素进行渲染，生成目标编辑图片。

典型地，根据所述转图请求中的文字元素和文字元素的样式信息绘制文字图片的过程可以描述如下：

1、首先对多行文字进行分行处理。

2、判断各行文字的文字方向。

1)如果文字是水平方向，则计算出每行文字的横坐标(记为x)，纵坐标(记为y)，绘制出文字图片。

(1)计算得出能够包含多行文字的最小矩形框的宽度(记为width)和高度(记为height),其中width＝最长一行文字的宽度，height＝行数×文字大小(记为fontSize)。

(2)根据行号(记为i)和fontSize计算纵向坐标(记为y)，其中y＝i*fontSize*1.2，这里取值为1.2是为了和大部分浏览器的行距做兼容。

(3)根据文字大小，文字的字体(记为fontFamily)，文字的颜色(记为color)，文字的内容(记为content)，文字是否为斜体(记为isItalic)，文字是否为粗体(记为isBold)，文字是否有下划线(记为isUnderline)，文字阴影(记为isShadow)，以及文字阴影的粗细(记为shadowBlur)等信息画出文字。在这些属性中，fontSize,fontFamily,color,isUnderline以及content可以直接调用ImageMagick图片处理库进行绘制。但是对于粗体，斜体以及文字阴影，由于中文字体缺少这些特效，则需要对文字内容里的中文进行模拟。假定通过绘制以后的文字图片的宽度为textWidth和textHeight。

a、由于中文字体是没有对应的粗体字体，所以需要对中文文字的粗体进行模拟：如果是微软雅黑字体，则不需要进行模拟，因为微软雅黑字体自带粗体字体。如果是其他中文字体，则需要使用ImageMagick的阴影效果进行模拟，将阴影的宽度设置为0.005×fontSize，阴影的颜色设为文字颜色，然后使用ImageMagick的DrawableStrokeWidth以及DrawableStrokeColor进行绘制。

b、由于中文字体是没有对应的斜体字体，所以需要对中文文字的斜体进行模拟：斜体的模拟使用水平方向的变换进行模拟，对水平方向进行倾斜拉伸(skew)变换，调用DrawableSkewX(-14),这里斜度取值为-14度是为了兼容浏览器的效果。

c、中文字体文件也没有阴影效果，所以需要对中文字体的阴影效果进行模拟：在本实施例中通过模糊效果对阴影进行模拟，调用ImageMagick库中的blur方法，取值为2进行模拟。

(4)根据文字的水平对齐方向计算横坐标(记为x)。

a、当文字为左对齐时，x＝0。

b、当文字为居中对齐时，x＝(width-textWidth)/2。

c、当文字为右对齐时，x＝width–textWidth。

2)如果文字是垂直方向

(1)确定能够包含多行文字的最小矩形框中文字的最大水平字数(记为hNum)和最大垂直个数(记为vNum)。

(2)对每一行文字再分割出各文字，针对每个文字再计算每个字的横坐标和纵坐标(记为y)，然后使用水平文字的绘制方法将文字绘制到图片上。假定行数为lineNum，行号为i，文字在每行中的列号为j，文字大小为fontSize，每行文字的字数为wordNum。

a、每个字的横坐标的计算公式为x＝(lineNum–i–1)×fontSize。

b、每个字的纵坐标需要依赖于垂直对齐方式：

a)如果是垂直居中对齐：则y＝(2×j+vNum-wordNum)×fontSize×0.55。

b)如果是底部对齐：则y＝(j+vNum-wordNum)×fontSize×1.1。

c)如果是顶部对齐：则y＝j×fontSize×1.1。

3、当绘制完所有的文字后，文字周边有可能还会有空白。如果文字没有阴影效果，需要调用图片裁切的方法，将文字周边的空白去掉。

示例性地，参见图7，客户端浏览器200中需要渲染文字元素“开户赠送2888元”。客户端浏览器200会以http请求的方式请求到服务端300。客户端浏览器200的请求中包括文字元素和文字元素的样式。其中文字元素的样式包括：文字大小、文字的字体、文字方向、文字颜色、文字水平和垂直方向的对齐方式、文字内容、文字是否是斜体、文字是否是粗体、文字是否有下划线、文字阴影以及文字阴影的粗细中的至少一种。链接形如:http://image.baidu.com/render？

fontSize＝51&fontFamily＝Arial&direction＝horizontal&color＝％23737272&hAlign＝center&vAlign＝middle&content＝Hello&isItalic＝false&isBold＝false&isUnderline＝false&isShadow＝false&shadowBlur＝0

当服务端300接收到客户端浏览器200的请求后，首先会对URL进行解析，解析出文字的相关属性，然后再请求字转图服务，生成文字图片。反馈文字图片给客户端浏览器200，以使客户端浏览器200基于文字图片对文字元素进行渲染。

本发明实施例的技术方案，通过根据所述转图请求中的文字元素和文字元素的样式信息绘制文字图片。从而实现服务端对文字图片的绘制，进而减轻客户端压力。

本发明实施例所提供的图片可视化编辑装置可执行本发明任意实施例所提供的图片可视化编辑方法，具备执行方法相应的功能模块和有益效果。

实施例六

图8是本发明实施例六提供的一种图片可视化编辑装置的结构示意图。典型地，该装置可以是服务器。参见图8，本发明实施例提供的图片可视化编辑装置包括：请求接收模块40和图片生成模块50。

其中，请求接收模块40，用于接收客户端发送的包括文字图片的下载请求，其中所述客户端根据所述文字图片，对编辑区中可见的文字元素进行渲染和显示；

图片生成模块50，用于基于所述文字图片对编辑区的文字元素进行渲染，生成目标编辑图片。

本发明实施例通过将用户输入编辑页面中编辑区的文字元素转换为文字图片。客户端基于文字图片对编辑区中可见的文字元素进行渲染显示，服务端基于文字图片对编辑区中文字元素进行渲染，生成目标编辑图片。

这样不管在客户端中显示还是在服务端进行目标编辑图片生成时，文字都已经转变为了图片。而图片本身是具有跨平台一致的特性，所以不会出现客户端中显示的图片和服务器端生成的图片中对文字的展示不一致的问题。

此外，服务端可以对至少一个编辑区中的各元素进行渲染，生成至少一个目标编辑图片。从而可以实现对任意尺寸和数量的图片的生成。

进一步地，所述图片生成模块，包括：图片生成单元。

其中，图片生成单元，用于基于服务端浏览器内核的渲染机制和所述文字图片，对编辑区的文字元素进行渲染，其中所述服务端浏览器内核的渲染机制与客户端浏览器内核的渲染机制不同。

进一步地，所述的装置还包括：请求获取模块、图片绘制模块和图片反馈模块。

其中，请求获取模块，用于所述接收客户端发送的包括文字图片的下载请求之前，获取由客户端发送的转图请求；

图片绘制模块，用于根据所述转图请求中的文字元素和文字元素的样式信息绘制文字图片；

图片反馈模块，用于向客户端反馈绘制的文字图片。

进一步地，所述图片绘制模块，包括：图片绘制单元。

其中，图片绘制单元，用于根据所述转图请求中的文字元素和文字元素的样式信息，采用客户端浏览器内核的渲染机制对文字的渲染效果，绘制文字图片。

进一步地，图片绘制单元具体用于：

基于编译性语言和客户端浏览器内核的渲染机制中文字渲染参数，对所述文字元素进行绘制，生成文字图片。

进一步地，所述请求接收模块，包括：

请求接收单元，用于若编辑区存在除所述文字元素以外的其他元素，则接收客户端发送的包括所述文字图片和所述其他元素的下载请求；

图片生成单元，用于基于所述文字图片和所述其他元素，对编辑区中的各元素进行渲染，生成目标编辑图片。

本发明实施例所提供的图片可视化编辑装置可执行本发明任意实施例所提供的图片可视化编辑方法，具备执行方法相应的功能模块和有益效果。

实施例七

图9为本发明实施例七提供的一种设备的结构示意图。图9示出了适于用来实现本发明实施方式的示例性设备12的框图。图9显示的设备12仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图9所示，设备12以通用计算设备的形式表现。设备12的组件可以包括但不限于：一个或者多个处理器或者处理单元16，系统存储器28，连接不同系统组件(包括系统存储器28和处理单元16)的总线18。

总线18表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。

设备12典型地包括多种计算机系统可读介质。这些介质可以是任何能够被设备12访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储器28可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)30和/或高速缓存存储器32。设备12可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统34可以用于读写不可移动的、非易失性磁介质(图9未显示，通常称为“硬盘驱动器”)。尽管图9中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM,DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。存储器28可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块42的程序/实用工具40，可以存储在例如存储器28中，这样的程序模块42包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42通常执行本发明所描述的实施例中的功能和/或方法。

设备12也可以与一个或多个外部设备14(例如键盘、指向设备、显示器24等)通信，还可与一个或者多个使得用户能与该设备12交互的设备通信，和/或与使得该设备12能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口22进行。并且，设备12还可以通过网络适配器20与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器20通过总线18与设备12的其它模块通信。应当明白，尽管图中未示出，可以结合设备12使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

处理单元16通过运行存储在系统存储器28中的程序，从而执行各种功能应用以及数据处理，例如实现本发明实施例所提供的图片可视化编辑方法。

实施例八

本发明实施例八还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明实施例中任一所述的图片可视化编辑方法。该方法包括：

响应于可视化编辑请求，若用户输入编辑区的元素为文字元素，则根据所述文字元素和所述文字元素的样式信息生成文字图片；

根据所述文字图片，对所述编辑区中可见的文字元素进行渲染和显示；

响应用户对编辑区的下载操作，向服务端发送包括所述文字图片的下载请求，指示服务端基于所述文字图片对编辑区的文字元素进行渲染，生成目标编辑图片。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如”C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (17)

1.一种图片可视化编辑方法，应用于客户端，其特征在于，包括：

响应于可视化编辑请求，若用户输入编辑区的元素为文字元素，则根据所述文字元素和所述文字元素的样式信息生成文字图片；

根据所述文字图片，对所述编辑区中可见的文字元素进行渲染和显示；

响应用户对编辑区的下载操作，向服务端发送包括所述文字图片的下载请求，指示服务端基于服务端浏览器内核的渲染机制和所述文字图片，对编辑区的文字元素进行渲染，生成目标编辑图片，其中所述服务端浏览器内核的渲染机制与客户端浏览器内核的渲染机制不同；

其中，所述可见的文字元素为所述用户通过屏幕可以看见的文字关联的文字元素；所述下载操作用于在所述用户对编辑区的排版效果满意后生成具有排版效果的目标编辑图片。

2.根据权利要求1所述的方法，其特征在于，所述根据所述文字元素和所述文字元素的样式信息生成文字图片，包括：

根据所述文字元素和所述文字元素的样式信息生成转图请求；

向服务端发送所述转图请求，指示服务端根据所述转图请求中的文字元素和文字元素的样式信息绘制文字图片；

接收服务端反馈的文字图片。

3.根据权利要求1所述的方法，其特征在于，所述对所述编辑区中可见的文字元素进行渲染,包括:

基于客户端浏览器内核的渲染机制，对所述编辑区所属页面的可见区域进行渲染，其中所述客户端浏览器内核的渲染机制与服务端浏览器内核的渲染机制不同。

4.根据权利要求1所述的方法，其特征在于，所述响应用户对编辑区的下载操作，向服务端发送包括所述文字图片的下载请求，包括：

响应用户对编辑区的下载操作，若编辑区存在除所述文字元素以外的其他元素，则向服务端发送包括所述文字图片和所述其他元素的下载请求，指示服务端基于服务端浏览器内核的渲染机制、所述文字图片和所述其他元素，对编辑区中的各元素进行渲染，生成目标编辑图片。

5.一种图片可视化编辑装置，应用于客户端，其特征在于，包括：

图片生成模块，用于响应于可视化编辑请求，若用户输入编辑区的元素为文字元素，则根据所述文字元素和所述文字元素的样式信息生成文字图片；

文字渲染模块，用于根据所述文字图片，对所述编辑区中可见的文字元素进行渲染和显示；

图片下载模块，用于响应用户对编辑区的下载操作，向服务端发送包括所述文字图片的下载请求，指示服务端基于服务端浏览器内核的渲染机制和所述文字图片，对编辑区的文字元素进行渲染，生成目标编辑图片，其中所述服务端浏览器内核的渲染机制与客户端浏览器内核的渲染机制不同；

其中，所述可见的文字元素为所述用户通过屏幕可以看见的文字关联的文字元素；所述下载操作用于在所述用户对编辑区的排版效果满意后生成具有排版效果的目标编辑图片。

6.根据权利要求5所述的装置，其特征在于，所述图片生成模块，包括：

请求生成单元，用于根据所述文字元素和所述文字元素的样式信息生成转图请求；

请求发送单元，用于向服务端发送所述转图请求，指示服务端根据所述转图请求中的文字元素和文字元素的样式信息绘制文字图片；

图片接收单元，用于接收服务端反馈的文字图片。

7.根据权利要求5所述的装置，其特征在于，所述文字渲染模块,包括:

文字渲染单元，用于基于客户端浏览器内核的渲染机制，对所述编辑区所属页面的可见区域进行渲染，其中所述客户端浏览器内核的渲染机制与服务端浏览器内核的渲染机制不同。

8.一种图片可视化编辑方法，应用于服务端，其特征在于，包括：

接收客户端发送的包括文字图片的下载请求，其中所述客户端根据所述文字图片，对编辑区中可见的文字元素进行渲染和显示；

基于服务端浏览器内核的渲染机制和所述文字图片，对编辑区的文字元素进行渲染，生成目标编辑图片，其中所述服务端浏览器内核的渲染机制与客户端浏览器内核的渲染机制不同；

其中，所述可见的文字元素是用户通过屏幕可以看见的文字关联的文字元素；所述下载操作用于在所述用户对编辑区的排版效果满意后生成具有排版效果的目标编辑图片。

9.根据权利要求8所述的方法，其特征在于，所述接收客户端发送的包括文字图片的下载请求，包括：

若编辑区存在除所述文字元素以外的其他元素，则接收客户端发送的包括所述文字图片和所述其他元素的下载请求；

基于服务端浏览器内核的渲染机制、所述文字图片和所述其他元素，对编辑区中的各元素进行渲染，生成目标编辑图片。

10.根据权利要求8所述的方法，其特征在于，所述接收客户端发送的包括文字图片的下载请求之前，还包括：

获取由客户端发送的转图请求；

根据所述转图请求中的文字元素和文字元素的样式信息绘制文字图片；

向客户端反馈绘制的文字图片。

11.根据权利要求10所述的方法，其特征在于，所述根据所述转图请求中的文字元素和文字元素的样式信息绘制文字图片，包括：

根据所述转图请求中的文字元素和文字元素的样式信息，采用客户端浏览器内核的渲染机制对文字的渲染效果，绘制文字图片。

12.根据权利要求11所述的方法，其特征在于，采用客户端浏览器内核的渲染机制对文字的渲染效果，绘制文字图片，包括：

基于编译性语言和客户端浏览器内核的渲染机制中文字渲染参数，对所述文字元素进行绘制，生成文字图片。

13.一种图片可视化编辑装置，应用于服务端，其特征在于，包括：

请求接收模块，用于接收客户端发送的包括文字图片的下载请求，其中所述客户端根据所述文字图片，对编辑区中可见的文字元素进行渲染和显示；

图片生成模块，用于基于服务端浏览器内核的渲染机制和所述文字图片，对编辑区的文字元素进行渲染，其中所述服务端浏览器内核的渲染机制与客户端浏览器内核的渲染机制不同；

其中，所述可见的文字元素是用户通过屏幕可以看见的文字关联的文字元素；所述下载操作用于在所述用户对编辑区的排版效果满意后生成具有排版效果的目标编辑图片。

14.根据权利要求13所述的装置，其特征在于，还包括：

请求获取模块，用于所述接收客户端发送的包括文字图片的下载请求之前，获取由客户端发送的转图请求；

图片绘制模块，用于根据所述转图请求中的文字元素和文字元素的样式信息绘制文字图片；

图片反馈模块，用于向客户端反馈绘制的文字图片。

15.根据权利要求14所述的装置，其特征在于，所述图片绘制模块，包括：

图片绘制单元，用于根据所述转图请求中的文字元素和文字元素的样式信息，采用客户端浏览器内核的渲染机制对文字的渲染效果，绘制文字图片。

16.一种设备，其特征在于，所述设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-4或8-12中任一所述的图片可视化编辑方法。

17.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-4或8-12中任一所述的图片可视化编辑方法。