一种新型的图片生成方法

技术领域

本发明涉及于Web应用技术领域，尤其涉及一种新型的图片生成方法。

背景技术

随着网络的发达，以及各种社交APP发展迅速，信息传播愈加快速。H5营销在当前是一个企业传递自身价值观必不可少的渠道，而各种类型的H5快速搭建Web应用也不断发展。越来越多的网站不断推陈出新，其中图片生成功能也是较为吸引企业用户的一项新兴功能。图片生成，顾名思义，是指将多个不同的素材，组合之后生成一张全新的图片。企业用户可以通过自定义带有浓厚企业文化风格的图片供给受众保存，受众将图片进行再次传播，裂变也由此而来，而这种裂变，可以给企业带来有价值的宣传和推广。

现有技术中的实现方案存在用户可自定义的空间较小，不支持动态获取用户头像、昵称等基本信息；访问时，出现卡顿或者因为图片生成而等待的时间久等问题，所以现提出了一种新型的图片生成方法。

发明内容

基于背景技术存在的技术问题，本发明提出了一种新型的图片生成方法。

本发明提出的一种新型的图片生成方法，包括以下步骤：

S1：搭建一个图片控件编辑器，通过读取Blob的文件流，将文件转化为FormatData传输到服务端，通过监听Mouse事件中的Drag，判断是否有文件拖拽进入到编辑器，如果有，则把进入的文件上传到服务端；

S2：访问者访问页面时，请求服务器源码，服务端吐出资源文件，供给对应的浏览器解析，解析完毕之后进入到访问页面；

S3：通过浏览器访问图片控件编辑器，进行图片制作，触发保存按钮时，抽取出动态的元素，将其余静态资源生成一张图片，并且发送请求，将图片传输到服务端进行存储，并且将数据保存，生成控件；

S4：访问者请求页面，渲染出图片生成控件，获取动态元素，通过代理，加载对应资源，并且组合渲染生成图片；

S5：进入图片生成控件页面，获取对应控件的Dom节点，经过处理之后转换成SVG，再通过Canvas绘制出SVG，绘制完毕之后，将Canvas转换成Base64格式的图片，替换到对应的图片生成控件节点，生成完毕，并保存。

优选地，所述图片控件编辑器是通过AngularJs、HTML、Css以及JavaScript框架搭建的Web端编辑器，进行多文件上传以及对图片进行高保真压缩。

优选地，所述服务端由JAVA编写。

优选地，所述S3中图片制作的操作包括上传自己制作的图片、选择图片控件编辑器已有的素材、输入文本、制作表单、添加二维码、动态微信变量、添加滤镜效果、编辑内容进行缩放以及添加动画效果。

优选地，所述S3中的请求为Ajax请求。

优选地，所述S4中的对应资源包括移动端微信的微信头像、昵称和二维码。

本发明中的有益效果为：

1.图片控件编辑器支持多文件上传，并且可以进行高保真压缩，提高了页面的流畅程度及数据传输的速度，可编辑的素材类型多样化，通过将节点转换为SVG，再将SVG绘制到Canvas上，高保真的还原了用户编辑的内容，转化为一张完整的图片，大大降低了图片生成的时间。

2.服务端存储数据，支持复用，提高了安全性，服务端通过缓存技术，提高了访问速度以及页面响应时间，并且利用图像多端分开生成一部分的策略，提高了生成的速度，也有利于图片的静默生成，防止影响用户的体验。

3.在移动端支持将微信头像、昵称、二维码等也动态的渲染到图片上，利用Nginx代理的方式，处理了移动端数据跨域的问题，并且在传播H5时能够供给受众在多端进行图片的保存并且递增传播，提供了一种H5裂变传播的渠道。

附图说明

图1为本发明提出的一种新型的图片生成方法的流程示意图；

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。

参照图1，一种新型的图片生成方法，包括以下步骤：

搭建一个图片控件编辑器，通过读取Blob的文件流，将文件转化为FormatData传输到服务端，通过监听Mouse事件中的Drag，判断是否有文件拖拽进入到编辑器，如果有，则把进入的文件上传到服务端。

访问者访问页面时，请求服务器源码，服务端吐出资源文件，供给对应的浏览器解析，解析完毕之后进入到访问页面。

用户通过浏览器访问图片控件编辑器，进行图片制作，上传自己制作的图片、选择图片控件编辑器已有的素材、输入文本、制作表单、添加二维码、动态微信变量、添加滤镜效果、利用Transform等属性编辑内容进行缩放以及添加动画效果这些自定义组件，上传的图片支持二次处理，滤镜效果有高斯模糊、反转、羽化、过度曝光等效果，多种类型的自定义组件，将节点拼凑成一个组件，如文本、表单、形状、拼图等多种素材，主要是多种DOM节点构建组件，并且组件支持设置各类型的属性，通过属性的修改使得素材更加多样化，利用qrcode.js实现节点转化为二维码，二维码支持电子名片、连接、文本等，还有表单、形状、拼图等多种不同的素材。

触发保存按钮时，抽取出动态的元素，将其余静态资源生成一张图片，并且发送Ajax请求，将图片传输到服务端进行存储，并且将数据保存，生成控件，数据以文件的形式存储在服务端，当进入编辑时，获取数据的文件，减少请求次数，并且将文件添加到页面，读取之后生成对应的数据结构。

访问者请求页面，渲染出图片生成控件，获取动态元素，通过代理，加载对应资源，包括移动端微信的微信头像、昵称以及二维码等，并且组合渲染生成图片。

用户进入图片生成控件页面，获取对应控件的Dom节点，经过处理之后转换成SVG，再通过Canvas绘制出SVG，绘制完毕之后，将Canvas转换成Base64格式的图片，替换到对应的图片生成控件节点，生成完毕，并保存。

本发明中，图片控件编辑器是通过AngularJs、HTML、Css以及JavaScript框架搭建的Web端编辑器，支持多文件上传以及对图片进行高保真压缩，服务端由JAVA编写。

以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，根据本发明的技术方案及其发明构思加以等同替换或改变，都应涵盖在本发明的保护范围之内。