[发明专利]图片可视化编辑方法、装置、设备和介质

说明书

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

技术领域

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

背景技术

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

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

(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的方案只能对浏览器的屏幕可见区域进行截图(类似基于聊天工具的截图)，如果页面内容超过了屏幕的可见区域，或者有多个页面内容需要截图的时候，该方案就失效了。

发明内容

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

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

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

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

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

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