CN107507196A - 一种客户端上传及处理图片的方法 - Google Patents

一种客户端上传及处理图片的方法 Download PDF

Info

Publication number
CN107507196A
CN107507196A CN201710710677.8A CN201710710677A CN107507196A CN 107507196 A CN107507196 A CN 107507196A CN 201710710677 A CN201710710677 A CN 201710710677A CN 107507196 A CN107507196 A CN 107507196A
Authority
CN
China
Prior art keywords
picture
rotation
server
anglec
client
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Withdrawn
Application number
CN201710710677.8A
Other languages
English (en)
Inventor
刘勇彬
季统凯
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
G Cloud Technology Co Ltd
Original Assignee
G Cloud Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by G Cloud Technology Co Ltd filed Critical G Cloud Technology Co Ltd
Priority to CN201710710677.8A priority Critical patent/CN107507196A/zh
Publication of CN107507196A publication Critical patent/CN107507196A/zh
Withdrawn legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T7/00—Image analysis
    • G06T7/10—Segmentation; Edge detection
    • G06T7/11—Region-based segmentation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00—Geometric image transformations in the plane of the image
    • G06T3/60—Rotation of whole images or parts thereof
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/06—Protocols specially adapted for file transfer, e.g. file transfer protocol [FTP]

Landscapes

  • Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Theoretical Computer Science (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Signal Processing (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明涉及图片处理技术领域，特别是指一种客户端上传及处理图片的方法。本发明方法是客户端选择需要上传到服务器的图片，并确定需要对图片的旋转角度及截取部分；然后将图片、旋转角度及截取部分的坐标信息发送至服务器；服务器对接收的图片根据旋转角度及截取部分的坐标信息进行处理；处理完成后返回客户端。本发明的方法兼容性好，不依赖于客户端，兼容所有Web浏览器；可移植性强。可适用于多种场景，比如用户头像上传，手机拍摄上传等。

Description

一种客户端上传及处理图片的方法
技术领域
本发明涉及图片处理技术领域，特别是指一种客户端上传及处理图片的方法。
背景技术
在互联网的大背景下，用户时常通过网络进行各种图片处理，比如家庭共享，用户头像等。而现有的技术中，对于图片上传一直都比较粗糙，并且基本都是在客户端处理后再上传到服务器。这个时候对于浏览器的兼容性要求就比较高，往往用户都因为浏览器兼容性问题无法对自己上传的图片进行很好的优化处理，不能给用户带来很好的用户体验。这里做得比较好的比如QQ头像上传功能，然而这些方案存在以下弊端：
1、对前端技术门槛比较高，需要处理各种客户端兼容性问题。
2、可移植性较差，无法适用于各种前端开发语言。
发明内容
本发明解决的技术问题在于提供一种客户端上传及处理图片的方法；解决传统方法存在的不足，为用户提供一种用户体验好，可移植性强的解决方案。
本发明解决上述技术问题的技术方案是：
所述的方法是客户端选择需要上传到服务器的图片，并确定需要对图片的旋转角度及截取部分；然后将图片、旋转角度及截取部分的坐标信息发送至服务器；服务器对接收的图片根据旋转角度及截取部分的坐标信息进行处理；处理完成后返回客户端。
所述的服务器，是应用部署所在服务器，承载服务端代码，对上传的图片进行处理的服务器。
所述的图片旋转角度，是为了让上传的图片摆正所需要调整图片的旋转角度
所述的截取部分，是指选择需要保留的整体图片的部分。
所述的坐标信息，即一组(x，y)的数据集合，选择图片上的指定位置可以用X，Y轴标记，截取图片部分可以由一组(x，y)的数据集合来表示。
本发明的方法兼容性好，不依赖于客户端，兼容所有Web浏览器，有效降低前端开发代码量及维护成本。可移植性强，可适用于多种场景，比如用户头像上传，手机拍摄上传等。
附图说明
下面结合附图对本发明进一步说明：
图1为本发明的流程图。
具体实施方式
为使本发现的目的、技术方案和优点更加清楚，下面将结合附图并以实际开发案例作进一步详细解说。如图1所示，具体实施过程如下：
本样例前端技术采用比较流行的cropper，也可以选择其他能满足效果的前端技术，cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。
在这里只使用cropper的预览裁剪功能，截取图片交后台处理。
1、选择需要上传到服务器的图片；
引入相关js文件，主要是Cropper.js，上传HTML代码
＜input type＝″file″name＝″file″id＝″fileImg″class＝″portraitFile″/＞
所述的服务器，这里是应用部署所在服务器，承载服务端代码，对上传的图片进行处理的服务器。
2、在浏览器上预览图片，并选择需要图片旋转角度及截取部分图片；
通过Cropper转换预览图片，自定义需要截图的图片部分，以下为初始化图片代码片段：
所述的图片旋转角度，有些上传图片由于拍摄原因会存在各种角度，比如手机横着拍的时候上传的图片角度可能就会变成90度或270度，这个时候为了让上传的图片摆正就需要调整图片的旋转角度，以获取正确的图片角度。
所述的截取部分图片，这里是指选择需要保留的整体图片的部分，去掉其他不需要的部分图片。
3、获取旋转角度及截取的坐标轴集合；
4、上传预览图片及需要处理的图片信息；
以下关键上传参数信息：
_this.$dataX.val(Math.round(data.x))；//截图左上角X坐标
_this.$dataY.val(Math.round(data.y))；//截图左上角X坐标
_this.$dataHeight.val(Math.round(data.height))；//截图高度
_this.$dataWidth.val(Math.round(data.width))；//截图宽度
_this.$dataRotate.val(Math.round(data.rotate))；//截图旋转角度
所述的坐标轴集合，即一组(x，y)的数据集合，选择图片上的指定位置都可以用X，Y在标记，所以截取图片部分可以由一组(x，y)的数据集合来表示。
5、后台服务器获取到上传图片及需要处理的图片信息；
所述的需要处理的图片信息，是指前台传过来的旋转角度及截取图片的坐标轴集合。
后台定义需要获取的主要参数：
6、根据需要处理的图片信息对上传的图片进行处理，获取到与客户端处理所需的图片效果；
所述的获取到与客户端处理所需的图片效果，即服务器根据前台传输过来的旋转角度及截图图片的坐标轴集合对图片进行处理，最终保留处理后的图片，并返回客户端。
后台关键处理图片函数，根据前端传输的旋转角度及截图参数对图片进行处理并保存到指定的服务器目录；

Claims (5)

1.一种客户端上传及处理图片的方法，其特征在于：所述的方法是客户端选择需要上传到服务器的图片，并确定需要对图片的旋转角度及截取部分；然后将图片、旋转角度及截取部分的坐标信息发送至服务器；服务器对接收的图片根据旋转角度及截取部分的坐标信息进行处理；处理完成后返回客户端。
2.根据权利要求1所述的方法，其特征在于：
所述的服务器，是应用部署所在服务器，承载服务端代码，对上传的图片进行处理的服务器。
3.根据权利要求1所述的方法，其特征在于：
所述的图片旋转角度，是为了让上传的图片摆正所需要调整图片的旋转角度
所述的截取部分，是指选择需要保留的整体图片的部分。
4.根据权利要求1所述的方法，其特征在于：
所述的图片旋转角度，是为了让上传的图片摆正所需要调整图片的旋转角度
所述的截取部分，是指选择需要保留的整体图片的部分。
5.根据权利要求1至4任一项所述的方法，其特征在于：
所述的坐标信息，即一组(x，y)的数据集合，选择图片上的指定位置可以用X,Y轴标记，截取图片部分可以由一组(x，y)的数据集合来表示。
CN201710710677.8A 2017-08-18 2017-08-18 一种客户端上传及处理图片的方法 Withdrawn CN107507196A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710710677.8A CN107507196A (zh) 2017-08-18 2017-08-18 一种客户端上传及处理图片的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710710677.8A CN107507196A (zh) 2017-08-18 2017-08-18 一种客户端上传及处理图片的方法

Publications (1)

Publication Number Publication Date
CN107507196A true CN107507196A (zh) 2017-12-22

Family

ID=60692051

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710710677.8A Withdrawn CN107507196A (zh) 2017-08-18 2017-08-18 一种客户端上传及处理图片的方法

Country Status (1)

Country Link
CN (1) CN107507196A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107911407A (zh) * 2017-10-11 2018-04-13 广东欧珀移动通信有限公司 媒体数据的处理方法及装置、计算机存储介质、计算机设备
CN111274517A (zh) * 2020-01-09 2020-06-12 深圳海带宝网络科技股份有限公司 一种移动端页面图片上传压缩及裁剪处理方法

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102685080A (zh) * 2011-03-17 2012-09-19 腾讯科技（北京）有限公司 图片处理方法及系统
CN103150745A (zh) * 2011-12-06 2013-06-12 腾讯科技（深圳）有限公司 在线编辑图片的方法和装置
CN103729825A (zh) * 2013-12-31 2014-04-16 世纪龙信息网络有限责任公司 终端动态适配的图片处理方法
CN105094563A (zh) * 2015-08-11 2015-11-25 成都视达科信息技术有限公司 一种图片裁剪方法及裁剪系统

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102685080A (zh) * 2011-03-17 2012-09-19 腾讯科技（北京）有限公司 图片处理方法及系统
CN103150745A (zh) * 2011-12-06 2013-06-12 腾讯科技（深圳）有限公司 在线编辑图片的方法和装置
CN103729825A (zh) * 2013-12-31 2014-04-16 世纪龙信息网络有限责任公司 终端动态适配的图片处理方法
CN105094563A (zh) * 2015-08-11 2015-11-25 成都视达科信息技术有限公司 一种图片裁剪方法及裁剪系统

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107911407A (zh) * 2017-10-11 2018-04-13 广东欧珀移动通信有限公司 媒体数据的处理方法及装置、计算机存储介质、计算机设备
CN111274517A (zh) * 2020-01-09 2020-06-12 深圳海带宝网络科技股份有限公司 一种移动端页面图片上传压缩及裁剪处理方法

Similar Documents

Publication Publication Date Title
CN108737882B (zh) 图像的显示方法、装置、存储介质及电子装置
CN104012106B (zh) 使表示不同视点的视频对准
US9946949B2 (en) Techniques including URL recognition and applications
CN103442411A (zh) 通讯设备通过扫描二维码图形自动连接至wifi的方法
CN106303565B (zh) 视频直播的画质优化方法和装置
CN102104798A (zh) 远程购物视频系统及选购方法
CN103647916A (zh) 图片的存储方法及装置
CN102802129A (zh) 通过移动设备发送图片的方法和系统
US20150244756A1 (en) Method, Apparatus and System for Determining Terminal That is to Share Real-Time Video
US20140204225A1 (en) Image processing apparatus, image processing method, program, and display device
CN105959620A (zh) 一种全景视频的同步显示方法及设备
CN108881728B (zh) 一种线下跨设备影像拍摄的方法、系统和拍摄设备
CN103840859B (zh) 传输文件的方法、终端及系统
CN107507196A (zh) 一种客户端上传及处理图片的方法
CN111833234B (zh) 图像显示方法、图像处理装置和计算机可读存储介质
CN101739654A (zh) 一种制作图像集的方法、系统和服务器
CN105306773A (zh) 一种图片传输方法和装置
CN104661098B (zh) 客户端设备、服务器、显示方法和计算机可读介质
CN108810567A (zh) 一种音频与视频视角匹配的方法、客户端和服务器
CN103747058B (zh) 一种展示图片的方法和装置
CN103491393B (zh) 一种视频业务处理方法及设备
US20160315935A1 (en) Imaging processing system and electronic blackboard
CN104038741A (zh) 一种视频数据的投影方法
CN102867003A (zh) 进行页面展示的方法及系统
CN107608643B (zh) 基于低质量照片的多维度分析、识别与优化方法

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
WW01 Invention patent application withdrawn after publication
WW01 Invention patent application withdrawn after publication

Application publication date: 20171222