本发明涉及图片处理的技术领域，特别是涉及一种在html5页面中编辑图片的方法和一种在html5页面中编辑图片的装置。
背景技术：
随着科学技术的发展，网购在人们的生活中的越来越重要，因为涉及到卖方的信誉，网购后的评价环节及晒单环节是网购重要的环节，而评价环节或者晒单环节通过需要上传图片，并且对图片的美观度有一定的要求，通常用户对上传的图片进行编辑；此外，在上传照片到官方的网页时，如某些考试的报名步骤中，需要报名者上传照片，而对上传照片的格式、大小也有一定特殊的要求，需要对图片进行编辑或者调整。
上述的两种情况中，用户通常会可以在网页或特定软件中对图片或照片进行编辑，在特定软件中编辑的话，例如，在photoshop中编辑的话，加载的时间长，用户体验不高，另外，在html5(hypertextmarkuplanguage5，第五代超文本标记语言)技术出现之前，用户如果需要在网页中对图片或照片进行编辑的话，需要将图片或照片上传到服务器，在服务器中进行编辑，然后从服务器传回编辑后的图片，用户再确定是否保留编辑后的结果，因为服务器处理图片或照片，需要花费较多系统资源，流程繁琐，提高运作的成本，增加用户等待的时间，用户体验不高。
技术实现要素：
鉴于上述问题，本发明实施例提出了一种在html5页面中编辑图片的方法和相应的一种在html5页面中编辑图片的装置。
为了解决上述问题，本发明实施例公开了一种在html5页面中编辑图片的方法，所述html5页面中预先设置有特征区域；所述方法包括：
接收用户上传至当前html5页面中的特征区域的目标图片；
接收用户针对所述目标图片的编辑操作事件；
依据所述编辑操作事件调整所述目标图片；
发送调整后的目标图片至所述服务器。
优选地，所述接收用户上传至当前html5页面中的特征区域的目标图片的步骤之前，还包括：
接收用户针对所述html5页面的点击事件；
响应所述点击事件，加载所述html5页面。
优选地，所述接收用户上传至当前html5页面中的特征区域的目标图片的步骤包括：
当接收到用户针对所述目标图片的拖拽至所述浏览器加载的html5页面的确认信息时，所述浏览器将所述目标图片转化为对应的图片数据流；
接收所述图片数据流至所述特征区域。
优选地，所述编辑操作包括旋转操作事件和/或缩放操作事件和/或裁剪操作事件和/或滤镜选择事件，所述依据所述编辑操作事件调整所述目标图片的步骤包括：
响应用户针对所述目标图片的旋转操作事件；
在所述特征区域内针对所述目标图片进行适配于所述旋转操作事件的旋转操作；
和/或，
响应用户针对所述目标图片的缩放操作事件；
在所述特征区域内针对所述目标图片进行适配于所述缩放操作事件的缩放操作；
和/或，
响应用户针对所述目标图片的裁剪操作事件；
在所述特征区域内针对所述目标图片进行适配于所述裁剪操作事件的裁剪操作；
和/或，
响应用户针对所述目标图片的滤镜选择事件；
在所述特征区域内针对所述目标图片添加适配于所述滤镜选择事件的滤镜。
优选地，所述服务器用于存储调整后的目标图片。
优选地，所述方法还包括：
输出所述调整后的目标图片至客户端。
优选地，所述方法还包括：
获取用户在所述网页上针对所述目标图片的裁剪操作和/或缩放操作和/或裁剪操作的操作过程；
将所述操作过程转换为交互动画；
在所述网页上展示所述交互动画。
本发明实施例还公开了一种在html5页面中编辑图片的装置，所述html5页面中预先设置有特征区域；所述装置包括：
目标图片接收模块，用于接收用户上传至当前html5页面中的特征区域的目标图片；
编辑操作事件接收模块，用于接收用户针对所述目标图片的编辑操作事件；
目标图片调整模块，用于依据所述编辑操作事件调整所述目标图片；
服务器发送模块，用于发送调整后的目标图片至所述服务器。
优选地，与所述目标图片接收模块相连接的模块还包括：
点击事件接收模块，用于接收用户针对所述html5页面的点击事件；
页面加载模块，用于响应所述点击事件，加载所述html5页面。
优选地，所述目标图片接收模块包括：
图片数据流转化子模块，用于当接收到用户针对所述目标图片的拖拽至所述浏览器加载的html5页面的确认信息时，所述浏览器将所述目标图片转化为对应的图片数据流；
图片数据流接收子模块，用于接收所述图片数据流至所述特征区域。
本发明实施例包括以下优点：
本发明实施例中，接收用户上传至当前html5页面中的特征区域的目标图片，接收用户针对所述目标图片的编辑操作事件，依据所述编辑操作事件调整所述目标图片，发送调整后的目标图片至所述服务器。可以在网页页面中对图片或照片进行编辑，不需要对图片进行预先的操作，简化繁琐的步骤，避免使用服务器对目标图片进行编辑，节约资源与时间，提高设备工作效率，增强用户体验。
进一步地，接收用户针对目标图片的编辑操作事件，响应用户针对所述目标图片的编辑操作事件，在所述特征区域内针对所述目标图片进行适配于所述编辑操作事件的操作，发送调整后的目标图片至所述服务器，还可以输出调整后的目标图片至客户端，避免传送目标图片至所述服务器进行编辑，节约服务器资源及网络资源，可以保存网页上编辑的图片到客户端，进一步地增强用户的体验。
附图说明
图1是本发明的一种在html5页面中编辑图片的方法实施例一的步骤流程图；
图2是本发明的一种在html5页面中编辑图片的方法实施例二的步骤流程图；
图3是本发明的一种在html5页面中编辑图片的装置实施例的结构框图。
具体实施方式
为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。
参照图1，示出了本发明的一种在html5页面中编辑图片的方法实施例一的步骤流程图，所述html5页面中预先设置有特征区域；具体可以包括如下步骤：
步骤101，接收用户上传至当前html5页面中的特征区域的目标图片；
本发明实施例中，是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(html，hypertextmark-uplanguage)的第五次重大修改。其中，html5是相比于html4或以前的版本，html5提供画布接口canvasapi(applicationprogramminginterface,应用程序编程接口),canvas是html5的出现的一种新标签，可借助其进行2d/3d图片绘制。进一步地，html5还提供了一种html5fileapi(文件应用程序编程接口)，其用于html5提供的文件接口，可借助该接口进行解析图片对象，获取图片二进制数据。本发明实施例，可以使用javascript语言进行对网页的编辑(包括对html5的编辑)，javascript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为javascript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在html(标准通用标记语言下的一个应用)网页上使用，用来给html网页增加动态功能。
具体到本发明实施例，用户打开一个特定html5页面时，具体可以为需要上传的图片的html5页面，例如，可以是网购后输入评价的页面或“晒单”的页面，还可以是资格考试的报名的页面，通常考试报名都是上传个人的照片(例如，一寸免冠红底照片)，还可以是其它需要上传照片或图片的网页页面，本发明实施例对此不作任何限制。在上述需要上传照片或图片的页面中会一个上传框，只用于上传照片或图片，或显示上传的照片或图片，但在现有技术中，用户并不能在上传框编辑图片，本发明实施例中，html5页面中预先设置有特征区域，所述特征区域可以上传框，也可以是其它的编辑框，本发明实施例不作任何限制。
本发明实施例的一种优选实施例中，所述接收用户上传至当前html5页面中的特征区域的目标图片的步骤之前，还包括以下的步骤：
步骤s11，收用户针对所述html5页面的点击事件；
步骤s12响应所述点击事件，加载所述html5页面。
具体而言，用户打开浏览器中特定html5页面时，用户把需要上传的目标图片，拖拽到或点击上传的按钮，上传目标图片至特定html5页面的特征区域，浏览器中的特定html5页面接收目标图片并显示在特征区域内，以便下一步用户的操作。
步骤102，接收用户针对所述目标图片的编辑操作事件；
实际应用中，用户会上传目标图片至特征区域后，用户可以在特征区域内编辑目标图片，结合步骤101中特定场景考虑，用户需要评价或“晒单”或上传个人照片；上述的特定场景都需要用户对上传的照片及图片进行缩放、旋转、裁剪，添加滤镜，甚至是调节亮度及对比度等，要求上传的图片及照片有一定的美观度。本发明实施例中，浏览器显示特定html5页面时，浏览器对应的移动终端会用户针对目标图片的编辑操作事件，其中，所述编辑操作事件可以包括旋转操作事件和/或缩放操作事件和/或裁剪操作事件和/或滤镜选择事件，还可以包括亮度调节操作事件，对比度调节操作事件，透明度调节操作事件、特定风格调节操作事件，本发明实施例对此不作任何的限制。
步骤103，依据所述编辑操作事件调整所述目标图片；
需要说明的是，浏览器接收上述的编辑操作事件后，响应上述的用户针对目标图片的旋转操作事件和/或缩放操作事件和/或裁剪操作事件和/或滤镜选择事件，或者响应上述的亮度调节操作事件和/或对比度调节操作事件和/或透明度调节操作事件和/或特定风格调节操作事件，调整目标图片。
步骤104，发送调整后的目标图片至所述服务器。
进一步地，当用户确定目标图片达到预期的编辑效果时，特定html5页面所属的浏览器发送执行编辑操作后的目标图片至服务器，其中，所述服务器可以用于储存调整后的目标图片，以便进一步特定html5页面展示目标图片，需要说明的是，服务器可以包括网页服务器，文件服务器、数据库服务器、应用服务器，本发明实施例对服务器的种类不作限制。
本发明实施例中，浏览器接收用户上传至当前html5页面中的特征区域的目标图片，接收用户针对所述目标图片的编辑操作事件，依据所述编辑操作事件调整所述目标图片，发送调整后的目标图片至所述服务器。针对特定场景中的用户需要上传图片或照片的情况，可以在网页页面中对图片或照片进行编辑，而不需要打开特定的软件进行编辑图片或照片后再上传至网页中，不需要对图片进行预先的操作，简化繁琐的步骤，避免使用服务器对目标图片进行编辑，节约资源与时间，提高设备工作效率，增强用户体验。
参照图2，示出了本发明的一种在html5页面中编辑图片的方法实施例二的步骤流程图，所述html5页面中预先设置有特征区域；具体可以包括如下步骤：
步骤201，当接收到用户针对所述目标图片的拖拽至所述浏览器加载的html5页面的确认信息时，所述浏览器将所述目标图片转化为对应的图片数据流；
本发明实施例中，当用户将目标图片拖拽至浏览器加载的html5页面或者，当用户点击上传的按钮，选择上传的目标图片，确认上传目标图片后，通过html5页面上特定的api接口将所述目标图片转化为对应的图片数据流，例如，利用html5fileapi接口，可以读取图片对象的详细信息，还可以将目标图片转换为二进制数据流(本质就是二进制字符串)。得到了图片的二进制数据流，就可以对图片进行详细解读和任何操作。
步骤202，接收所述图片数据流至所述特征区域；
应用于本发明实施例，目标图片以图片数据流的形式传送至特定html5页面中的特征区域后，在特征区域以目标图片以图片对象的形式呈现在用户面前，用户可以对目标图片进行编辑操作。需要说明的是，目标图片转化图片数据流的过程是移动终端(智能手机或个人电脑等)的后台执行，其过程并不会呈现在用户的能够观察到的网页上。
步骤203，接收用户针对所述目标图片的编辑操作事件；
具体而言，浏览器接收用户针对目标图片的编辑操作事件，其中，编辑操作事件可以包括编辑操作事件可以包括旋转操作事件和/或缩放操作事件和/或裁剪操作事件和/或滤镜选择事件，还可以包括亮度调节操作事件，对比度调节操作事件，透明度调节操作事件、特定风格调节操作事件，需要说明的是，上述的编辑操作事件仅仅是本发明实施例若干种枚举，还可以是针对目标图片的像素点的编辑操作事件，以及局部亮度及对比度的调节操作事件，本发明实施例对此不作限制。
步骤204，依据所述编辑操作事件调整所述目标图片；
本发明实施例的一种优选实施例中，所述编辑操作包括旋转操作事件和/或缩放操作事件和/或裁剪操作事件和/或滤镜选择事件，所述依据所述编辑操作事件调整所述目标图片具体包括以下步骤：
子步骤s11，响应用户针对所述目标图片的旋转操作事件；
子步骤s12，在所述特征区域内针对所述目标图片进行适配于所述旋转操作事件的旋转操作；
本发明实施例的另一种优选实施例中，所述依据所述编辑操作事件调整所述目标图片具体还包括以下步骤：
子步骤s21，响应用户针对所述目标图片的缩放操作事件；
子步骤s22，在所述特征区域内针对所述目标图片进行适配于所述缩放操作事件的缩放操作；
本发明实施例的另一种优选实施例中，所述依据所述编辑操作事件调整所述目标图片具体还包括以下步骤：
子步骤s31，响应用户针对所述目标图片的裁剪操作事件；
子步骤s32，在所述特征区域内针对所述目标图片进行适配于所述裁剪操作事件的裁剪操作；
本发明实施例的另一种优选实施例中，所述依据所述编辑操作事件调整所述目标图片具体还包括以下步骤：
子步骤s41，响应用户针对所述目标图片的滤镜选择事件；
子步骤s42，在所述特征区域内针对所述目标图片添加适配于所述滤镜选择事件的滤镜。
需要说明的是，该特征区域可以是特定html5网页的任何位置，例如，可以是网页的中央，也可以是网页在弹出显示位置，本发明实施例对此不作任何的限制。本发明实施例中，除了响应用户的上述的旋转操作事件和/或缩放操作事件和/或裁剪操作事件和/或滤镜选择事件之外，还可以是针对图片的亮度、比对度等图片的固有色彩的调节操作事件，本发明实施例具体不作任何限制。
步骤205，发送调整后的目标图片至所述服务器。
进一步地，服务器可以储存所述目标图片，以便展示所述目标图片在特定html5网页上，需要说明的是，目标图片可以展示在特征区域，也可以展示在特定html5网页的其它的位置，例如，在特定html5网页的弹出显示位置，或者，是html5网页与用户的文字评论合并展示，本发明实施具体对展示方式不作任何的限制。
本发明实施例的一种优选实施例中，所述方法还包括以下的步骤：
步骤s51，输出调整后的目标图片至客户端。
应用于本发明实施例中，目标图片调整之后，还输出到客户端以便用户下次使用，需要说明的是，所述客户端可以包括移动终端等。
本发明实施例的另一种优选实施例中，所述方法还包括：
步骤s61，获取用户在所述网页上针对所述目标图片的裁剪操作和/或缩放操作和/或裁剪操作的操作过程；
步骤s62，将所述操作过程转换为交互动画；
步骤s63，在所述网页上展示所述交互动画。
实际应用中，本发明实施例还对用户的编辑操作过程通过canvas提供的api与javascript技术转换为图片编辑的交互动画，用户可以用光标或手势对目标图片进行拖拽、缩放、旋转等编辑操作，并可以直接看到操作后的效果。其中，通过javascript进行用户交互部分的处理，用canvas进行交互后的目标图片的效果的绘制和展现。
本发明实施例中，浏览器接收用户针对目标图片的编辑操作事件，其中，编辑操作事件可以包括编辑操作事件可以包括旋转操作事件和/或缩放操作事件和/或裁剪操作事件和/或滤镜选择事件，还可以包括亮度调节操作事件，对比度调节操作事件，透明度调节操作事件、特定风格调节操作事件，响应用户针对所述目标图片的编辑操作事件，在所述特征区域内针对所述目标图片进行适配于所述编辑操作事件的操作，发送调整后的目标图片至所述服务器，还可以输出调整后的目标图片至客户端，实现了在html5网页上对目标图片进行编辑操作，避免传送目标图片至所述服务器进行编辑，节约服务器资源及网络资源，还可以保存网页上编辑的图片到客户端，进一步地增强用户的体验。
需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明实施例并不受所描述的动作顺序的限制，因为依据本发明实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本发明实施例所必须的。
参照图3，示出了本发明的一种在html5页面中编辑图片的装置实施例的结构框图，所述html5页面中预先设置有特征区域；具体可以包括如下模块：
目标图片接收模块，用于接收用户上传至当前html5页面中的特征区域的目标图片；
编辑操作事件接收模块，用于接收用户针对所述目标图片的编辑操作事件；
目标图片调整模块，用于依据所述编辑操作事件调整所述目标图片；
服务器发送模块，用于发送调整后的目标图片至所述服务器。
优选地，与所述目标图片接收模块相连接的模块还包括：
点击事件接收模块，用于接收用户针对所述html5页面的点击事件；
页面加载模块，用于响应所述点击事件，加载所述html5页面。
优选地，所述目标图片接收模块包括：
图片数据流转化子模块，用于当接收到用户针对所述目标图片的拖拽至所述浏览器加载的html5页面的确认信息时，所述浏览器将所述目标图片转化为对应的图片数据流；
图片数据流接收子模块，用于接收所述图片数据流至所述特征区域。
优选地，所述编辑操作包括旋转操作事件和/或缩放操作事件和/或裁剪操作事件和/或滤镜选择事件，所述目标图片调整模块包括：
旋转操作事件响应子模块，用于响应用户针对所述目标图片的旋转操作事件；
旋转操作适配子模块，用于在所述特征区域内针对所述目标图片进行适配于所述旋转操作事件的旋转操作；
本发明实施例一种优选实施例中，所述目标图片调整模块包括：
缩放操作事件响应子模块，用于响应用户针对所述目标图片的缩放操作事件；
缩放操作适配子模块，用于在所述特征区域内针对所述目标图片进行适配于所述缩放操作事件的缩放操作；
本发明实施例另一种优选实施例中，所述目标图片调整模块还包括：
裁剪操作事件响应子模块，用于响应用户针对所述目标图片的裁剪操作事件；
裁剪操作适配子模块，用于在所述特征区域内针对所述目标图片进行适配于所述裁剪操作事件的裁剪操作；
本发明实施例另一种优选实施例中，所述目标图片调整模块还包括：
滤镜选择事件响应子模块，用于响应用户针对所述目标图片的滤镜选择事件；
滤镜适配子模块，用于在所述特征区域内针对所述目标图片添加适配于所述滤镜选择事件的滤镜。
优选地，所述服务器用于存储调整后的目标图片。
本发明实施例一种优选实施例中，所述装置还包括：
目标图片输出模块，用于输出所述调整后的目标图片至客户端。
本发明实施例另一种优选实施例中，所述装置还包括：
操作过程获取模块，用于获取用户在所述网页上针对所述目标图片的裁剪操作和/或缩放操作和/或裁剪操作的操作过程；
交互动画转换模块，用于将所述操作过程转换为交互动画；
交互动画展示模块，用于在所述网页上展示所述交互动画。
对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。
本领域内的技术人员应明白，本发明实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本发明实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
本发明实施例是参照根据本发明实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本发明实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。
最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。
以上对本发明所提供的一种方法和一种装置，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。