[发明专利]一种新型的图片生成方法

说明书

本发明公开了一种新型的图片生成方法，包括以下步骤：搭建一个图片控件编辑器，通过读取Blob的文件流，将文件转化为FormatData传输到服务端，通过监听Mouse事件中的Drag，判断是否有文件拖拽进入到编辑器，如果有，则把进入的文件上传到服务端；访问者访问页面时，请求服务器源码，服务端吐出资源文件，供给对应的浏览器解析，解析完毕之后进入到访问页面。本发明图片控件编辑器支持多文件上传，并且可以进行高保真压缩，提高了页面的流畅程度及数据传输的速度，可编辑的素材类型多样化，并且在传播H5时能够供给受众在多端进行图片的保存并且递增传播，提供了一种H5裂变传播的渠道。

技术领域

本发明涉及于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上，高保真的还原了用户编辑的内容，转化为一张完整的图片，大大降低了图片生成的时间。