基于PhoneGap的web图文混合内容保存方法与流程

本发明涉及一种基于phonegap的web图文混合内容保存方法，属于hybrid方式的移动应用开发技术领域。

背景技术：

hybridapp开发方式日益流行，使得我们可以使用html5、javascript等技术开发app，并运行于ios、安卓等多种平台。这种开发方式下，app的native部分提供访问设备的接口，web部分调用接口完成相应的业务功能。目前最流行的hybrid开发框架是phonegap。常见的需求场景是，web页面是需要打开手机摄像头拍照或者打开手机相册选择照片，并且上传照片到服务器。phonegap提供了相关的接口，一是打开摄像头或选择相册照片的接口（以下称为camera接口），二是上传文件到服务器的接口（以下称为transfer接口）。当需求场景变的复杂起来，例如需要编辑图文混合的内容并上传，将来还需要容易地修改和浏览（见图1）。通常使用phonegap框架的解决方案是（见图2）：

1.编辑文字并选择图片，生成文本和图片混合的html片段；

2.调用transfer接口逐个上传图片，并获得图片的url；

3.将图片url插入到html片段中（img标签的src属性）；

4.保存html片段到服务器。

原有的方案逻辑复杂，后续操作依赖前面操作的完成，需要多次连接服务器，操作时间长，服务器压力大。

技术实现要素：

本发明的目的在于提供一种基于phonegap的web图文混合内容保存方法；解决原有的方案逻辑复杂，后续操作依赖前面操作的完成，需要多次连接服务器，操作时间长，服务器压力大等问题。本方法只需要一种方案单次连接服务器即可保存所有图片以及图文混合的html片段，且html片段中img标签的src属性拥有正确的url。

本发明采取的技术方案是：一种基于phonegap的web图文混合内容保存方法，其包括以下步骤：

步骤一：编辑文字并选择图片，生成文本和图片混合的html片段，img标签的src属性用0、1、2...来占位；

步骤二：选择图片调用camera接口时，获取图片的base64编码的字符串，并将字符串保存在一个数组中，数组下标0、1、2...和img标签的src属性中的占位字符一一对应；

步骤三：使用ajax接口，将html片段和图片字符串数组一起上传到服务器；

步骤四：服务器遍历图片字符串数组，保存成图片文件，并生成相应的url，然后替换html片段中0、1、2...占位字符；

步骤五：保存html片段即可。

本发明的有益效果是：单次访问服务器即可完成图文混合信息的保存操作，时间短、服务器压力小，免去了前后操作相互依赖。

本发明的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

图1是现有技术和本发明均使用的修改和浏览界面。

图2是现有技术上传图文混合内容的流程图。

图3是本发明上传图文混合内容的流程图。

具体实施方式

下面结合附图和具体实施例对本发明进行详细说明。

以编辑带有文字“祝你生日快乐”的图片为例，在图1界面中编辑文字“祝你生日快乐”输入输入框，并选择图片，生成文本和图片混合的html片段，img标签的src属性用0、1、2...来占位。

选择图片调用camera接口时，获取图片的base64编码的字符串，并将字符串保存在一个数组中，数组下标0、1、2...和img标签的src属性中的占位字符一一对应。

使用ajax接口，将html片段和图片字符串数组以前上传到服务器。

服务器遍历图片字符串数组，保存成图片文件，并生成相应的url，然后替换html片段中0、1、2等占位字符。

保存html片段即可。

以上显示和描述了本发明的基本原理、主要特征和优点。本领域的普通技术人员应该了解，上述实施例不以任何形式限制本发明的保护范围，凡采用等同替换等方式所获得的技术方案，均落于本发明的保护范围内。

本发明未涉及部分均与现有技术相同或可采用现有技术加以实现。

技术特征：

技术总结
本发明公开了一种基于PhoneGap的web图文混合内容保存方法，其包括步骤为：1、编辑文字并选择图片，生成文本和图片混合的HTML片段，img标签的src属性用0、1、2...来占位；2、选择图片调用camera接口时，获取图片的base64编码的字符串，并将字符串保存在一个数组中，数组下标0、1、2...和img标签的src属性中的占位字符一一对应；3、使用ajax接口，将HTML片段和图片字符串数组一起上传到服务器；4、服务器遍历图片字符串数组，保存成图片文件，并生成相应的URL，然后替换HTML片段中0、1、2等占位字符；5、保存HTML片段。本发明单次访问服务器即可完成图文混合信息的保存操作，时间短、服务器压力小，免去了前后操作相互依赖。

技术研发人员：李淮如
受保护的技术使用者：江苏鸿信系统集成有限公司
技术研发日：2017.10.12
技术公布日：2018.02.23