一种在HTML5页面中编辑图片的方法和装置制造方法及图纸

本发明专利技术实施例提供了一种在HTML5页面中编辑图片的方法和装置，所述HTML5页面中预先设置有特征区域；所述方法包括：接收用户上传至当前HTML5页面中的特征区域的目标图片；接收用户针对所述目标图片的编辑操作事件；依据所述编辑操作事件调整所述目标图片；发送调整后的目标图片至所述服务器。可以在网页页面中对图片或照片进行编辑，不需要对图片进行预先的操作，简化繁琐的步骤，避免使用服务器对目标图片进行编辑，节约资源与时间，提高设备工作效率，增强用户体验，避免传送目标图片至所述服务器进行编辑，节约服务器资源及网络资源，可以保存网页上编辑的图片到客户端，进一步地增强用户的体验。

A method and device for editing pictures in HTML5 pages

An embodiment of the invention provides a method and device for editing a picture in a HTML5 page. The HTML5 page is predisposed with a feature area; the method includes receiving the user uploaded to the target picture of the characteristic area in the current HTML5 page; receiving an editing operation event of the user against the target picture; The editing operation event adjusts the target picture, and sends the adjusted target picture to the server. You can edit pictures or photos in web pages. It does not require pre operation of the pictures, simplifies the complicated steps, avoids the use of the server to edit the target pictures, saves the resources and time, improves the efficiency of the equipment, enhances the user experience, and avoids the transmission of the target pictures to the server. It can save server resources and network resources, save pictures on the web page to the client, and further enhance user experience.

【技术实现步骤摘要】
一种在HTML5页面中编辑图片的方法和装置
本专利技术涉及图片处理的
，特别是涉及一种在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页面中预先设置有特征区域；所述方法包括：接收用户上传至当前HTML5页面中的特征区域的目标图片；接收用户针对所述目标图片的编辑操作事件；依据所述编辑操作事件调整所述目标图片；发送调整后的目标图片至所述服务器。

【技术特征摘要】
1.一种在HTML5页面中编辑图片的方法，其特征在于，所述HTML5页面中预先设置有特征区域；所述方法包括：接收用户上传至当前HTML5页面中的特征区域的目标图片；接收用户针对所述目标图片的编辑操作事件；依据所述编辑操作事件调整所述目标图片；发送调整后的目标图片至所述服务器。2.根据权利要求1所述的方法，其特征在于，所述接收用户上传至当前HTML5页面中的特征区域的目标图片的步骤之前，还包括：接收用户针对所述HTML5页面的点击事件；响应所述点击事件，加载所述HTML5页面。3.根据权利要求1所述的方法，其特征在于，所述接收用户上传至当前HTML5页面中的特征区域的目标图片的步骤包括：当接收到用户针对所述目标图片的拖拽至所述浏览器加载的HTML5页面的确认信息时，所述浏览器将所述目标图片转化为对应的图片数据流；接收所述图片数据流至所述特征区域。4.根据权利要求1或3所述的方法，其特征在于，所述编辑操作包括旋转操作事件和/或缩放操作事件和/或裁剪操作事件和/或滤镜选择事件，所述依据所述编辑操作事件调整所述目标图片的步骤包括：响应用户针对所述目标图片的旋转操作事件；在所述特征区域内针对所述目标图片进行适配于所述旋转操作事件的旋转操作；和/或，响应用户针对所述目标图片的缩放操作事件；在所述特征区域内针对所述目标图片进行适配于所述缩放操作事件的缩放操作；和/或，响应用户针对所述目标图片的裁剪操作事件；在所述特征区域内针对所述目标图片进行适配于所述裁剪操作事件的裁剪操作；和/或，响应用户针对所述目标图片...

【专利技术属性】
技术研发人员：童笃龙，伊光旭，
申请(专利权)人：厦门飞博共创网络科技股份有限公司，
类型：发明
国别省市：福建,35