CN111274517A - 一种移动端页面图片上传压缩及裁剪处理方法 - Google Patents

一种移动端页面图片上传压缩及裁剪处理方法 Download PDF

Info

Publication number
CN111274517A
CN111274517A CN202010020280.8A CN202010020280A CN111274517A CN 111274517 A CN111274517 A CN 111274517A CN 202010020280 A CN202010020280 A CN 202010020280A CN 111274517 A CN111274517 A CN 111274517A
Authority
CN
China
Prior art keywords
picture
uploading
data stream
mobile terminal
compressing
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.)
Pending
Application number
CN202010020280.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.)
Shenzhen Haidaibao Network Technology Co ltd
Original Assignee
Shenzhen Haidaibao Network 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 Shenzhen Haidaibao Network Technology Co ltd filed Critical Shenzhen Haidaibao Network Technology Co ltd
Priority to CN202010020280.8A priority Critical patent/CN111274517A/zh
Publication of CN111274517A publication Critical patent/CN111274517A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N1/00—Scanning, transmission or reproduction of documents or the like, e.g. facsimile transmission; Details thereof
    • H04N1/41—Bandwidth or redundancy reduction

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明属于因特网WEB技术领域，尤其涉及一种移动端页面图片上传压缩及裁剪处理方法，依次经过选择本地上传图片；把要上传的本地图片转换成Canvas技术可以识别的数据流；通过Canvas技术把上传的本地图片等比例压缩；将Canvas技术压缩的数据流以image的格式导出；初始化截图控件；用截图控件裁剪出需要的图片内容；截图控件导出所裁剪图片的Base64数据流；将裁剪图片的Base64数据流上传至WEB服务器保存八个步骤，在客户端实现图片上传、Canvas压缩优化，裁剪图片，在为用户提供友好操作体验的同时，也减轻服务器端网络、负载压力。

Description

一种移动端页面图片上传压缩及裁剪处理方法
技术领域
本发明属于因特网WEB技术领域，尤其涉及一种移动端页面图片上传压缩及裁剪处理方法。
背景技术
随着智能移动设备尤其智能手机使用越来越普遍，手机拍照技术越来越发达，其拍摄的图片质量越来越高，体积也越来越大，导致WEB浏览器传统上传、裁剪图片体验越来越差，具体表现：
1、客户选择图片后，会出现卡顿。
2、客户裁剪图片时，操作不流畅。
3、客户提交裁剪图片内容后，会出现长时间等待，甚至由于服务端负载和网络压力太大导致报错。
一般的，WEB浏览器在接收到上传图片的指令时，通过WEB浏览器内预置的文件上传通知接口，启动浏览器的图片选择流程，在图片选择完成后，获取相应的图片数据，将所述图片数据传入所述WEB页面中；用户有时候还需要对上传的图片进行裁剪，如上传头像，一般的，是在确定裁切的尺寸后，通过位置坐标的形式上传给服务器，然后服务器按照该位置坐标对上传的图片进行裁剪，裁剪后的图片再反馈给WEB浏览器的网页显示，从而使得图片的上传、裁剪、传输过程耗时较多，占用较多的网络带宽和内存资源，所以才会出现以上情况。
则创建一种移动端页面图片上传压缩及裁剪处理方法是当前WEB浏览器急需解决的问题。
发明内容
本发明的目的在于提供一种移动端页面图片上传压缩及裁剪处理方法，以解决上述背景技术中提出的问题。
一种移动端页面图片上传压缩及裁剪处理方法，包括以下步骤：
步骤一、选择本地上传图片；
步骤二、将所述上传图片转换成Canvas技术可以识别的数据流；
步骤三、通过Canvas技术把所述数据流等比例压缩，得到压缩数据流；
步骤四、将所述压缩数据流以image的格式导出；
步骤五、初始化截图控件；
步骤六、截图控件裁剪出需要的图片内容；
步骤七、截图控件导出所裁剪图片的Base64数据流；
步骤八、将所述Base64数据流上传至WEB服务器保存。
作为本发明一种移动端页面图片上传压缩及裁剪处理方法的进一步改进，所述步骤一中，通过Input标签选择本地上传图片。
作为本发明一种移动端页面图片上传压缩及裁剪处理方法的进一步改进，所述步骤二中，通过FileReader标签或者Image标签把选择的本地上传图片转换成Canvas技术可以识别的数据流。
作为本发明一种移动端页面图片上传压缩及裁剪处理方法的进一步改进，述步骤四中，将Canvas技术压缩的数据流还可以以jpeg的格式导出。
作为本发明一种移动端页面图片上传压缩及裁剪处理方法的进一步改进，所述步骤五、步骤六和步骤七中采用Cropper.js裁图控件。
作为本发明一种移动端页面图片上传压缩及裁剪处理方法的进一步改进，所述步骤五中通过Canvas技术压缩的数据流初始化截图控件。
作为本发明一种移动端页面图片上传压缩及裁剪处理方法的进一步改进，所述步骤八中，通过API接口将裁剪图片的Base64数据流传输至WEB服务器保存。
该发明一种移动端页面图片上传压缩及裁剪处理方法的有益效果：在客户端实现图片上传、Canvas压缩优化，裁剪图片，在为用户提供友好操作体验的同时，也减轻服务器端网络、负载压力。
附图说明
图1为本发明的方法步骤示意图；
具体实施方式
以下结合实施例和实验例对本发明作进一步的阐述，所述的实施例和实验例仅为本发明一部分的实施例和实验例，这些实施例和实验例仅用于解释本发明，对本发明的范围并不构成任何限制。
一种移动端页面图片上传压缩及裁剪处理方法，包括以下步骤：
步骤一、选择本地上传图片；
步骤二、将所述上传图片转换成Canvas技术可以识别的数据流；
步骤三、通过Canvas技术把所述数据流等比例压缩，得到压缩数据流；
步骤四、将所述压缩数据流以image的格式导出；
步骤五、初始化截图控件；
步骤六、截图控件裁剪出需要的图片内容；
步骤七、截图控件导出所裁剪图片的Base64数据流；
步骤八、将所述Base64数据流上传至WEB服务器保存。
实施例一
先通过Input标签选择本地上传图片，通过FileReader标签把上传的本地图片转换成Canvas技术可以识别的数据流，再通过过Canvas技术把上传图片等比例压缩，此处选择压缩比例为5:1，然后以image格式导出Canvas技术压缩的数据流，用该数据流初始化Cropper.js裁图控件，客户根据控件裁剪出需要的图片内容，Cropper.js截图空间导出客户选取的图片Base64数据流，最终将该数据流通过API接口发送给WEB服务器保存。
实施例二
先通过Input标签选择本地上传图片，通过Image标签把上传的本地图片转换成Canvas技术可以识别的数据流，再通过过Canvas技术把上传图片等比例压缩，此处选择压缩比例为8；1，然后以image格式导出Canvas技术压缩的数据流，用该数据流初始化Cropper.js裁图控件，客户根据控件裁剪出需要的图片内容，Cropper.js截图空间导出客户选取的图片Base64数据流，最终将该数据流通过API接口发送给WEB服务器保存。
实施例三
先通过Input标签选择本地上传图片，通过FileReader标签把上传的本地图片转换成Canvas技术可以识别的数据流，再通过过Canvas技术把上传图片等比例压缩，此处选择压缩比例为10:1，然后以jpeg格式导出Canvas技术压缩的数据流，用该数据流初始化Cropper.js裁图控件，客户根据控件裁剪出需要的图片内容，Cropper.js截图空间导出客户选取的图片Base64数据流，最终将该数据流通过API接口发送给WEB服务器保存。
结合Canvas技术，在客户端实现图片的上传、压缩和裁剪，为用户提供友好操作体验，满足质量越来越高，体积也越来越大的拍摄图片上传需求，减轻服务器端网络、负载压力，使得上传图片更加流畅。
其以上所述，仅是本发明的较佳实施例而已，并非对本发明作任何形式上的限制，虽然本发明已以较佳实施例揭露如上，然而并非用以限定本发明，任何熟悉本专业的技术人员，在不脱离本发明技术方案范围内，当可利用上述揭示的技术内容作出些许更动或修饰为等同变化的等效实施例，但凡是未脱离本发明技术方案内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化与修饰，均仍属于本发明技术方案的范围内。

Claims (7)

1.一一种移动端页面图片上传压缩及裁剪处理方法，其特征在于，包括以下步骤：
步骤一、选择本地上传图片；
步骤二、将所述上传图片转换成Canvas技术可以识别的数据流；
步骤三、通过Canvas技术把所述数据流等比例压缩，得到压缩数据流；
步骤四、将所述压缩数据流以image的格式导出；
步骤五、初始化截图控件；
步骤六、截图控件裁剪出需要的图片内容；
步骤七、截图控件导出所裁剪图片的Base64数据流；
步骤八、将所述Base64数据流上传至WEB服务器保存。
2.根据权利要求1所述一种移动端页面图片上传压缩及裁剪处理方法，其特征在于：所述步骤一中，通过Input标签选择本地上传图片。
3.根据权利要求1所述一种移动端页面图片上传压缩及裁剪处理方法，其特征在于：所述步骤二中，通过FileReader标签或者Image标签把选择的本地上传图片转换成Canvas技术可以识别的数据流。
4.根据权利要求1所述一种移动端页面图片上传压缩及裁剪处理方法，其特征在于：所述步骤四中，将Canvas技术压缩的数据流还可以以jpeg的格式导出。
5.根据权利要求1所述一种移动端页面图片上传压缩及裁剪处理方法，其特征在于：所述步骤五、步骤六和步骤七中采用Cropper.js裁图控件。
6.根据权利要求1所述一种移动端页面图片上传压缩及裁剪处理方法，其特征在于：所述步骤五中通过Canvas技术压缩的数据流初始化截图控件。
7.根据权利要求1所述一种移动端页面图片上传压缩及裁剪处理方法，其特征在于：所述步骤八中，通过API接口将裁剪图片的Base64数据流传输至WEB服务器保存。
CN202010020280.8A 2020-01-09 2020-01-09 一种移动端页面图片上传压缩及裁剪处理方法 Pending CN111274517A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010020280.8A CN111274517A (zh) 2020-01-09 2020-01-09 一种移动端页面图片上传压缩及裁剪处理方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010020280.8A CN111274517A (zh) 2020-01-09 2020-01-09 一种移动端页面图片上传压缩及裁剪处理方法

Publications (1)

Publication Number Publication Date
CN111274517A true CN111274517A (zh) 2020-06-12

Family

ID=71000175

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010020280.8A Pending CN111274517A (zh) 2020-01-09 2020-01-09 一种移动端页面图片上传压缩及裁剪处理方法

Country Status (1)

Country Link
CN (1) CN111274517A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112487396A (zh) * 2020-12-08 2021-03-12 平安国际智慧城市科技股份有限公司 图片的处理方法、装置、计算机设备及存储介质
CN112565771A (zh) * 2020-11-30 2021-03-26 上海博泰悦臻电子设备制造有限公司 图片压缩方法、装置、电子设备及介质
CN113505108A (zh) * 2021-07-09 2021-10-15 苏州万店掌网络科技有限公司 一种基于Canvas的图片压缩处理方法、装置及存储介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105335925A (zh) * 2014-07-30 2016-02-17 北京畅游天下网络技术有限公司 一种图片的裁剪方法和浏览器装置
CN107295079A (zh) * 2017-06-19 2017-10-24 深圳市麦谷科技有限公司 一种物联网流量卡的实名照片上传方法及系统
CN107507196A (zh) * 2017-08-18 2017-12-22 国云科技股份有限公司 一种客户端上传及处理图片的方法

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105335925A (zh) * 2014-07-30 2016-02-17 北京畅游天下网络技术有限公司 一种图片的裁剪方法和浏览器装置
CN107295079A (zh) * 2017-06-19 2017-10-24 深圳市麦谷科技有限公司 一种物联网流量卡的实名照片上传方法及系统
CN107507196A (zh) * 2017-08-18 2017-12-22 国云科技股份有限公司 一种客户端上传及处理图片的方法

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112565771A (zh) * 2020-11-30 2021-03-26 上海博泰悦臻电子设备制造有限公司 图片压缩方法、装置、电子设备及介质
CN112487396A (zh) * 2020-12-08 2021-03-12 平安国际智慧城市科技股份有限公司 图片的处理方法、装置、计算机设备及存储介质
CN113505108A (zh) * 2021-07-09 2021-10-15 苏州万店掌网络科技有限公司 一种基于Canvas的图片压缩处理方法、装置及存储介质

Similar Documents

Publication Publication Date Title
CN111274517A (zh) 一种移动端页面图片上传压缩及裁剪处理方法
CN109168028B (zh) 视频生成方法、装置、服务器及存储介质
US9653081B2 (en) Digital media frame
EP2323383B1 (en) Method and apparatus for sharing data in video conference system
US6961754B2 (en) Interactive access, manipulation, sharing and exchange of multimedia data
US7603383B2 (en) Image communication system, server apparatus, and image communication method
US20060039478A1 (en) Image decoding and reducing apparatus and method
JP2007505580A (ja) シンクライアントにおいてグラフィカルおよびメディア表示を生成するための方法および装置
JP4976975B2 (ja) サーバ装置、サーバ装置の制御方法、およびサーバ装置の制御プログラム
CN110891084A (zh) 一种基于自主hvdp协议的瘦客户端远程桌面控制系统
CN104243923A (zh) 一种图片处理及图片预览的方法及系统
CN105430393B (zh) 一种图片处理方法、图片处理装置、图片处理平台以及存储介质
CN110740352B (zh) 显卡透传环境下基于spice协议的差异图像显示方法
CN115599744A (zh) 文件的转码方法、装置、存储介质及电子装置
CN103945165A (zh) 终端设备远程视频传输的处理方法和装置
US11991412B2 (en) Standard dynamic range (SDR) / hybrid log-gamma (HLG) with high dynamic range (HDR) 10+
CN103781039A (zh) 一种具有压缩功能的短信系统及其实现方法
CN110661880A (zh) 一种远程协助方法、系统和存储介质
JPH11196379A (ja) 映像サーバ及びその制御方法及び記憶媒体
KR20160082521A (ko) 크로마 하향 변환 및 상향 변환 처리
CN112188235B (zh) 媒体处理方式的选择方法及媒体处理方法
CN110990109B (zh) 一种拼接屏回显方法、终端、系统及存储介质
CN112948046A (zh) 截屏方法、装置、设备及存储介质
CN111107316B (zh) 图像显示方法、设备及系统
CN109727304B (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
WD01 Invention patent application deemed withdrawn after publication
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20200612