CN111104631B - 一种Webp图片格式转换方法 - Google Patents

一种Webp图片格式转换方法 Download PDF

Info

Publication number
CN111104631B
CN111104631B CN201911208673.5A CN201911208673A CN111104631B CN 111104631 B CN111104631 B CN 111104631B CN 201911208673 A CN201911208673 A CN 201911208673A CN 111104631 B CN111104631 B CN 111104631B
Authority
CN
China
Prior art keywords
picture
format
user
webp
entering
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.)
Active
Application number
CN201911208673.5A
Other languages
English (en)
Other versions
CN111104631A (zh
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.)
Sichuan Business Easy Co ltd
Original Assignee
Sichuan Business Easy 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 Sichuan Business Easy Co ltd filed Critical Sichuan Business Easy Co ltd
Priority to CN201911208673.5A priority Critical patent/CN111104631B/zh
Publication of CN111104631A publication Critical patent/CN111104631A/zh
Application granted granted Critical
Publication of CN111104631B publication Critical patent/CN111104631B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

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
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • 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/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
    • G06F16/9566—URL specific, e.g. using aliases, detecting broken or misspelled links
    • 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]
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Signal Processing (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明公开了一种Webp图片格式转换方法，包括以下步骤：S1、接收用户上传的webp格式的图片文件；S2、将webp格式的图片文件转换成canvas，通过canvas.toDataURL获取base64数据；S3、将base64数据赋值到页面中img标签的src属性中展示，同时把base64数据赋值到html页面中a标签的href中；S4、获取用户发送的图片下载指令，根据获取的图片下载指令生成并发送目标下载图片文件给用户。本发明的方法使用HTML加JavaScript技术，上传webp格式图片文件在网页上转换图片格式，然后下载通用图片格式，如png等格式图片，使得部分不能直接浏览webp格式图片的电脑可以将webp格式图片转换成通用格式后进行浏览。

Description

一种Webp图片格式转换方法
技术领域
本发明涉及图片格式转换技术领域，特别是涉及一种Webp图片格式转换方法。
背景技术
WebP格式，谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。Facebook、Ebay等知名网站已经开始测试并使用WebP格式。
WebP既支持有损压缩也支持无损压缩。相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。
但是，目前仍有许多电脑不支持Webp图片格式，需要提供一种能将Webp图片转换成这些电脑支持的图片格式。。
发明内容
为解决现有技术中存在的问题，本发明提供了一种Webp图片格式转换方法，该方法使用HTML加JavaScript技术，上传webp格式图片文件在网页上转换图片格式，然后下载通用图片格式，如png等格式图片，使得部分不能直接浏览webp格式图片的电脑可以将webp格式图片转换成通用格式后进行浏览。
为实现上述目的，本发明采用如下技术方案：
一种Webp图片格式转换方法，包括以下步骤：
S1、接收用户上传的webp格式的图片文件；
S2、将webp格式的图片文件转换成canvas，通过canvas.toDataURL获取base64数据；
S3、将base64数据赋值到html页面中img标签的src属性中展示，同时把base64数据赋值到html页面中a标签的href中(提供下载选项)；
S4、获取用户发送的图片下载指令，使用a标签的download属性，根据获取的图片下载指令生成并发送目标下载图片文件给用户(格式转换及下载)。
优选的，步骤S2包括以下步骤：
S21、判断是否接收到用户发送的裁剪指令，若是，进入步骤S22，若否，进入步骤S23；
S22、初始化裁剪插件，通过裁剪插件对图片文件进行裁剪处理，通过cropper.js的cropper获取canvas，并进入步骤S24；
S23、通过canvas.getContext.drawImage将接收的用户上传的webp格式的图片文件转换成canvas，并进入步骤S24；
S24、将canvas通过toDataURL获取base64数据。
设置裁剪插件，用户在转换格式的同时，还可以对图片进行裁剪，增强了本发明的功能性。
优选的，步骤S4包括以下步骤：
S41、获取用户发送的图片下载指令；
S42、判断用户发送的图片下载指令中是否包括图片格式信息，若是，则进入步骤S43；若否，则进入步骤S45；
S43、录入图片格式信息；
S44、根据录入的信息生成并发送目标下载图片文件给用户；
S45、根据预设定的图片信息生成并发送目标下载图片文件给用户。
在获取用户发送的图片下载指令时，如果用户指定图片格式，则按照用户指定的图片格式进行转换，如果用户没有指定图片格式，则按照默认图片格式进行转换，使用更方便。
优选的，步骤S4还包括以下步骤：
S46、判断用户发送的图片下载指令中是否包括图片名称信息，若是，则进入步骤S47，若否，进入步骤S45；
S47、录入图片名称信息，并进入步骤S44。
在获取用户发送的图片下载指令时，如果用户指定图片名称，则按照用户指定的图片名称进行生成，如果用户没有指定图片名称，则按照默认图片名称进行生成，使用更方便。
有益效果在于：
1、使用HTML加JavaScript技术，上传webp格式图片文件在网页上转换图片格式，然后下载通用图片格式，如png等格式图片，使得部分不能直接浏览webp格式图片的电脑可以将webp格式图片转换成通用格式后进行浏览；
2、设置裁剪插件，用户在转换格式的同时，还可以对图片进行裁剪，增强了本发明的功能性；
3、在获取用户发送的图片下载指令时，如果用户指定图片格式，则按照用户指定的图片格式进行转换，如果用户没有指定图片格式，则按照默认图片格式进行转换，使用更方便；
4、在获取用户发送的图片下载指令时，如果用户指定图片名称，则按照用户指定的图片名称进行生成，如果用户没有指定图片名称，则按照默认图片名称进行生成，使用更方便。
具体实施方式
下面对本发明作进一步说明：
实施例：
一种Webp图片格式转换方法，包括以下步骤：
S1、接收用户上传的webp格式的图片文件；
S2、将webp格式的图片文件转换成canvas，通过canvas.toDataURL获取base64数据；
S3、将base64数据赋值到html页面中img标签的src属性中展示，同时把base64数据赋值到html页面中a标签的href中(提供下载选项)；
S4、获取用户发送的图片下载指令，使用a标签的download属性，根据获取的图片下载指令生成并发送目标下载图片文件给用户(格式转换及下载)。
在其中一个实施例中，步骤S2包括以下步骤：
S21、判断是否接收到用户发送的裁剪指令，若是，进入步骤S22，若否，进入步骤S23；
S22、初始化裁剪插件，裁剪插件为cropper.js，通过裁剪插件对图片文件进行裁剪处理，通过cropper.js的cropper('getCroppedCanvas')获取canvas，并进入步骤S24；
S23、通过canvas.getContext("2d").drawImage将接收的用户上传的webp格式的图片文件转换成canvas，并进入步骤S24；
S24、将canvas通过toDataURL获取base64数据。
设置裁剪插件，用户在转换格式的同时，还可以对图片进行裁剪，增强了本发明的功能性。
在其中一个实施例中，步骤S4包括以下步骤：
S41、获取用户发送的图片下载指令；
S42、判断用户发送的图片下载指令中是否包括图片格式信息，若是，则进入步骤S43；若否，则进入步骤S45；
S43、录入图片格式信息；
S44、根据录入的信息生成并发送目标下载图片文件给用户；
S45、根据预设定的图片信息生成并发送目标下载图片文件给用户。
在获取用户发送的图片下载指令时，如果用户指定图片格式，则按照用户指定的图片格式进行转换，如果用户没有指定图片格式，则按照默认图片格式进行转换，使用更方便。默认图片格式可以为png、jpg或jpeg。
在其中一个实施例中，步骤S4还包括以下步骤：
S46、判断用户发送的图片下载指令中是否包括图片名称信息，若是，则进入步骤S47，若否，进入步骤S45；
S47、录入图片名称信息，并进入步骤S44。
在获取用户发送的图片下载指令时，如果用户指定图片名称，则按照用户指定的图片名称进行生成，如果用户没有指定图片名称，则按照默认图片名称进行生成，使用更方便。
默认图片名称可以为test.png、test.jpg或test.jpeg。
以上显示和描述了本发明的基本原理、主要特征和优点。本行业的技术人员应该了解，本发明不受上述实施例的限制，上述实施例和说明书中描述的只是说明本发明的原理，在不脱离本发明精神和范围的前提下，本发明还会有各种变化和改进，这些变化和改进都落入要求保护的本发明范围内。

Claims (1)

1.一种Webp图片格式转换方法，其特征在于，包括以下步骤：
S1、接收用户上传的webp格式的图片文件；
S2、将webp格式的图片文件转换成canvas，通过canvas.toDataURL获取base64数据；
S3、将base64数据赋值到页面中img标签的src属性中展示，同时把base64数据赋值到html页面中a标签的href中；
S4、获取用户发送的图片下载指令，根据获取的图片下载指令生成并发送目标下载图片文件给用户；
步骤S2包括以下步骤：
S21、判断是否接收到用户发送的裁剪指令，若是，进入步骤S22，若否，进入步骤S23；
S22、初始化裁剪插件，通过裁剪插件对图片文件进行裁剪处理，通过cropper.js的cropper获取canvas，并进入步骤S24；
S23、通过canvas.getContext.drawImage将接收的用户上传的webp格式的图片文件转换成canvas，并进入步骤S24；
S24、将canvas通过toDataURL获取base64数据；
步骤S4包括以下步骤：
S41、获取用户发送的图片下载指令；
S42、判断用户发送的图片下载指令中是否包括图片格式信息，若是，则进入步骤S43；若否，则进入步骤S45；
S43、录入图片格式信息；
S44、根据录入的信息生成并发送目标下载图片文件给用户；
S45、根据预设定的图片信息生成并发送目标下载图片文件给用户；
步骤S4还包括以下步骤：
S46、判断用户发送的图片下载指令中是否包括图片名称信息，若是，则进入步骤S47，若否，进入步骤S45；
S47、录入图片名称信息，并进入步骤S44；
其中，设置裁剪插件，用户在转换格式的同时还可以对图片进行裁剪。
CN201911208673.5A 2019-11-30 2019-11-30 一种Webp图片格式转换方法 Active CN111104631B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911208673.5A CN111104631B (zh) 2019-11-30 2019-11-30 一种Webp图片格式转换方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911208673.5A CN111104631B (zh) 2019-11-30 2019-11-30 一种Webp图片格式转换方法

Publications (2)

Publication Number Publication Date
CN111104631A CN111104631A (zh) 2020-05-05
CN111104631B true CN111104631B (zh) 2023-06-20

Family

ID=70420898

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911208673.5A Active CN111104631B (zh) 2019-11-30 2019-11-30 一种Webp图片格式转换方法

Country Status (1)

Country Link
CN (1) CN111104631B (zh)

Families Citing this family (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113761417A (zh) * 2021-01-05 2021-12-07 北京沃东天骏信息技术有限公司 一种图片加载方法和装置
CN112788138A (zh) * 2021-01-11 2021-05-11 济南浪潮高新科技投资发展有限公司 一种量子云平台的线路图下载到本地的方法
CN112800372B (zh) * 2021-02-03 2023-06-13 网易（杭州）网络有限公司 页面加载方法、装置和电子设备
CN113163198B (zh) * 2021-03-19 2022-12-06 北京百度网讯科技有限公司 图像压缩方法、解压方法、装置、设备及存储介质
CN114095783A (zh) * 2021-11-29 2022-02-25 中国平安财产保险股份有限公司 图片上传方法、装置、计算机设备及存储介质
CN115130034A (zh) * 2022-08-29 2022-09-30 深圳市明源云空间电子商务有限公司 图片编码的生成方法、装置、设备及计算机可读存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103414793A (zh) * 2013-09-04 2013-11-27 广东全通教育股份有限公司 一种图片下载及上传装置和方法
CN106027608A (zh) * 2016-05-05 2016-10-12 武汉斗鱼网络科技有限公司 一种图片上传方法、客户端及服务器
CN109547533A (zh) * 2018-10-26 2019-03-29 深圳点猫科技有限公司 一种教育系统的html5移动端图片上传预处理方法及电子设备
CN109684568A (zh) * 2018-12-13 2019-04-26 珠海天燕科技有限公司 图片处理方法和装置

Family Cites Families (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105335925A (zh) * 2014-07-30 2016-02-17 北京畅游天下网络技术有限公司 一种图片的裁剪方法和浏览器装置
US20170223423A1 (en) * 2014-08-11 2017-08-03 Browseplay, Inc. System and method for secure cross-platform video transmission
CN109299412B (zh) * 2018-08-24 2022-04-05 四川爱创科技有限公司 应用于web端的图片预处理方法
CN109360149A (zh) * 2018-09-25 2019-02-19 平安普惠企业管理有限公司 一种图片上传方法、系统及终端设备
CN109525796A (zh) * 2018-12-12 2019-03-26 四川商通实业有限公司 一种Webp图片格式转换方法
CN109918175A (zh) * 2019-03-21 2019-06-21 上海携程商务有限公司 图片生成方法、装置、存储介质及电子设备

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103414793A (zh) * 2013-09-04 2013-11-27 广东全通教育股份有限公司 一种图片下载及上传装置和方法
CN106027608A (zh) * 2016-05-05 2016-10-12 武汉斗鱼网络科技有限公司 一种图片上传方法、客户端及服务器
CN109547533A (zh) * 2018-10-26 2019-03-29 深圳点猫科技有限公司 一种教育系统的html5移动端图片上传预处理方法及电子设备
CN109684568A (zh) * 2018-12-13 2019-04-26 珠海天燕科技有限公司 图片处理方法和装置

Also Published As

Publication number Publication date
CN111104631A (zh) 2020-05-05

Similar Documents

Publication Publication Date Title
CN111104631B (zh) 一种Webp图片格式转换方法
JP5022301B2 (ja) プロキシサーバおよび通信中継プログラム、並びに通信中継方法
US20160283606A1 (en) Method for performing webpage loading, device and browser thereof
US10572546B2 (en) Information processing apparatus, document display method, document display system, and medium
US9563449B2 (en) Mobilizing a web application to take advantage of a native device capability
CN103177015B (zh) 网页图像展示方法和系统
WO2012050832A1 (en) Systems and methods utilizing efficient video compression techniques for providing static image data
US9058399B2 (en) System and method for providing network resource identifier shortening service to computing devices
US9426202B2 (en) Transforming application cached template using personalized content
CN113382083A (zh) 一种网页截图方法和装置
KR20100022920A (ko) 프록시 서버를 이용한 이동통신 단말기의 웹 브라우저 시스템
JP5604016B1 (ja) スクリプトのキャッシュ方法及びそれを適用した情報処理装置
US10282403B2 (en) Server device, client device, information processing method, and recording medium
CN116578795A (zh) 网页页面的生成方法及装置、存储介质、电子设备
CN109525796A (zh) 一种Webp图片格式转换方法
US10509826B2 (en) Server device, client device, information processing method, and recording medium
US9875066B2 (en) Single action print application creation
KR20080076135A (ko) 웹페이지 제공방법 및 시스템과 이를 위한 프로그램기록매체
JP5774429B2 (ja) 通信装置および通信方法、ならびに、プログラム
CN113742284A (zh) 一种基于Java将OFD文件转换为图片的方法及系统
US20170124029A1 (en) System and method of producing dynamically customized images
CN112749353A (zh) 网页图标的处理方法和装置
KR100679033B1 (ko) 이동 통신 단말기용 웹 페이지를 제공하는 장치 및 방법
KR101579187B1 (ko) 애플리케이션 편집 방법, 애플리케이션 편집 서비스 제공 서버, 애플리케이션 편집기 및 기록매체
CN104978339A (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
GR01 Patent grant
GR01 Patent grant