CN116821080A - 在线图片压缩方法、装置、电子设备及存储介质 - Google Patents

在线图片压缩方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
CN116821080A
CN116821080A CN202310797606.1A CN202310797606A CN116821080A CN 116821080 A CN116821080 A CN 116821080A CN 202310797606 A CN202310797606 A CN 202310797606A CN 116821080 A CN116821080 A CN 116821080A
Authority
CN
China
Prior art keywords
picture
canvas
compressed
base64
compression
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
CN202310797606.1A
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.)
Unicloud Technology Co Ltd
Original Assignee
Unicloud 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 Unicloud Technology Co Ltd filed Critical Unicloud Technology Co Ltd
Priority to CN202310797606.1A priority Critical patent/CN116821080A/zh
Publication of CN116821080A publication Critical patent/CN116821080A/zh
Pending legal-status Critical Current

Links

Landscapes

  • Compression Or Coding Systems Of Tv Signals (AREA)

Abstract

本申请提供了一种在线图片压缩方法、装置、电子设备及存储介质,所述方法包括:获取待压缩图片,根据所述待压缩图片确定目标压缩格式,并将所述待压缩图片转换为base64数据;新建空白图片,将所述空白图片的src地址指向所述base64数据;新建canvas画布,将所述空白图片绘制到所述canvas画布中,利用画布算法对所述canvas画布进行压缩,输出base64数据;将输出得到的所述base64数据转换为目标压缩图片。本申请可以简便快速的在线压缩图片,图片压缩方法载入完成即可使用,不依赖后续网络,不需要专业的ps操作知识,而且能够免费提供图片压缩,具有很好的市场前景。

Description

在线图片压缩方法、装置、电子设备及存储介质
技术领域
本申请属于基础能力-通用前端技术领域,尤其涉及一种在线图片压缩方法、装置、电子设备及存储介质。
背景技术
在互联网中,上传图片是我们经常会遇到的操作,但是图片太大会导致一些不好的体验,如报名某些考试时会要求上传图片的大小不能超过多少kb,开发人员在开发网页的时候使用过大的图片加载速度过慢会影响用户的体验,后台文件服务器被装满等等各种问题,市面上有一些类似工具,但有的需要收费,对不想花钱的用户不友好,有的需要专业的ps能力,门槛太高。
发明内容
有鉴于此,本申请旨在提出一种在线图片压缩方法、装置、电子设备及存储介质,以现有压缩图片技术依赖后端或依赖客户端工具的问题。
为达到上述目的,本申请的技术方案是这样实现的:
第一方面,本申请提供了一种在线图片压缩方法,所述方法包括:
获取待压缩图片,根据所述待压缩图片确定目标压缩格式,并将所述待压缩图片转换为base64数据;
新建空白图片,将所述空白图片的src地址指向所述base64数据;
新建canvas画布,将所述空白图片绘制到所述canvas画布中,利用画布算法对所述canvas画布进行压缩,输出base64数据;
将输出得到的所述base64数据转换为目标压缩图片。
进一步地,所述新建空白图片,将所述空白图片的src地址指向所述base64数据,包括:
将转换后的base64字符串写入至新建的所述空白图片中,并作为待压缩图片的载体。
进一步地,所述新建canvas画布,将所述空白图片绘制到所述canvas画布中,利用画布算法对所述canvas画布进行压缩,输出base64数据,包括:
创建canvas画布,并将所述canvas画布的画布大小设置为与所述待压缩图片一致;
获取2D渲染上下文对象;
在canvas画布中绘制所述待压缩图片;
利用画布像素压缩算法对画布中绘制的所述待压缩图片进行压缩处理,将压缩后的所述待压缩图片数据以base64字符串格式输出。
进一步地,所述利用画布像素压缩算法对画布中绘制的所述待压缩图片进行压缩处理,将压缩后的所述待压缩图片数据以base64字符串格式输出,包括:
通过canvas的toDataURL方法进行压缩,将压缩后的canvas画布中的内容导出为base64字符串。
进一步地,在通过toDataURL方法进行压缩时,调整encoderOptions参数,所述encoderOptions参数的设置范围为0~1。
第二方面,基于同一发明构思,本申请还提供了一种在线图片压缩装置,包括:
获取模块,被配置为获取待压缩图片,根据所述待压缩图片确定目标压缩格式,并将所述待压缩图片转换为base64数据;
新建模块,被配置为新建空白图片,将所述空白图片的src地址指向所述base64数据;
压缩模块,被配置为新建canvas画布,将所述空白图片绘制到所述canvas画布中,利用画布算法对所述canvas画布进行压缩,输出base64数据;
输出模块,被配置为将输出得到的所述base64数据转换为目标压缩图片。
基于同一发明构思,本申请还提供了一种电子设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述程序时实现如第一方面所述的在线图片压缩方法。
基于同一发明构思,本申请还提供了一种非暂态计算机可读存储介质,其中,所述非暂态计算机可读存储介质存储计算机指令,所述计算机指令用于使所述计算机执行如第一方面所述的在线图片压缩方法。
相对于现有技术,本申请所述的在线图片压缩方法、装置、电子设备及存储介质具有以下有益效果:
本申请所述的在线图片压缩方法、装置、电子设备及存储介质,所述方法可以简便快速的在线压缩图片,图片压缩方法载入完成即可使用,不依赖后续网络,不需要专业的ps操作知识,而且能够免费提供图片压缩,具有很好的市场前景。
附图说明
构成本申请的一部分的附图用来提供对本申请的进一步理解,本申请的示意性实施例及其说明用于解释本申请,并不构成对本申请的不当限定。在附图中:
图1为本申请实施例所述的在线图片压缩方法流程图;
图2为本申请实施例所述的在线图片压缩装置结构示意图;
图3为本申请实施例所述的电子设备结构示意图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚明白,以下结合具体实施例,并参照附图,对本申请进一步详细说明。
需要说明的是,除非另外定义,本申请实施例使用的技术术语或者科学术语应当为本申请所属领域内具有一般技能的人士所理解的通常意义。本申请实施例中使用的“第一”、“第二”以及类似的词语并不表示任何顺序、数量或者重要性,而只是用来区分不同的组成部分。“包括”或者“包含”等类似的词语意指出现该词前面的元件或者物件涵盖出现在该词后面列举的元件或者物件及其等同,而不排除其他元件或者物件。“连接”或者“相连”等类似的词语并非限定于物理的或者机械的连接,而是可以包括电性的连接,不管是直接的还是间接的。“上”、“下”、“左”、“右”等仅用于表示相对位置关系,当被描述对象的绝对位置改变后,则该相对位置关系也可能相应地改变。
以下结合附图详细说明本申请的实施例。
请参阅图1所示,本申请一个实施例的在线图片压缩方法,包括以下步骤:
S101、获取待压缩图片,根据待压缩图片确定目标压缩格式,并将待压缩图片转换为base64数据。
具体地,获取待压缩图片可以使用浏览器提供的API,读取用户选择的图片文件,然后,可以使用JavaScript API将图片文件转换为base64编码,例如URL.createObjectURL()方法或FileReader对象。
根据当前待压缩图片的格式确定目标压缩图片的格式,目标压缩图片格式通常与原始图片格式相同,但可以根据需要进行更改,因此,需要根据待压缩图片的格式来确定输出的目标压缩格式,这里可以通过JavaScript中的字符串操作和条件运算符来实现。
S102、新建空白图片,将空白图片的src地址指向base64数据.
在一些实施方式中,将转换后的base64字符串写入至新建的空白图片中,并作为待压缩图片的载体。
通过将base64字符串写入至空白图片中,以确定当前待压缩图片的来源和目标位置。
S103、新建canvas画布,将空白图片绘制到canvas画布中,利用画布算法对canvas画布进行压缩,输出base64数据。
在一些实施方式中,创建canvas画布,并将canvas画布的画布大小设置为与待压缩图片一致;
获取2D渲染上下文对象;
在canvas画布中绘制待压缩图片;
利用画布像素压缩算法对画布中绘制的待压缩图片进行压缩处理,将压缩后的待压缩图片数据以base64字符串格式输出。
利用canvas算法压缩图片质量使用canvas API中提供的图像处理功能,例如drawImage()函数,将目标图像绘制到canvas上,并使用toDataURL()将其压缩为JPEG或PNG格式。同时,还可以通过调整canvas上下文的图像压缩算法和质量参数,从而实现图像的更细致的控制和压缩,这里需要根据具体情况进行适当的调整和优化。
我们使用canvas API将图片绘制并压缩成JPEG或PNG格式。该过程涉及到多个参数设置,如绘制区域、输出格式、压缩质量等,需要根据具体情况进行适当调整和优化,以达到最佳效果。
例如:
绘制区域:绘制的区域可以通过指定坐标位置和图像尺寸来实现。例如,如果原始图片比目标图片大很多,可以先按比例缩小图像然后再进行处理。
输出格式:JPEG和PNG是常见的输出格式。JPEG对于照片类图像的压缩效果比较好,而PNG适用于透明的Logo或其他具有简单颜色构成的图形。
压缩质量:可以通过修改质量参数来控制JPEG图像的输出质量,并通过修改PNG图像的压缩级别参数来控制PNG文件的大小。压缩质量越高,图像保留的细节就越多,但生成的文件也会更大。
性能调优:在绘制大分辨率的图片时,内存使用可能会非常高,导致页面卡顿。因此,在实现这个压缩过程时还需要考虑性能问题,避免内存泄漏和控制CPU占用率。
需要说明的是,为了获得最佳效果,需要根据实际情况进行一些调整和优化,同时考虑到性能和用户体验。
利用canvas画布中的算法压缩目标图片,并且提供参数来动态达到动态设置图片清晰度的目的,实现图像的压缩最关键的步骤是利用Canvas的API对图片进行压缩处理。常用的算法包括循环遍历像素点和使用波形变换进行像素压缩等方法,实际操作过程中,我们采用了基于图像采样和大量平滑等方法来减小文件大小和降低质量损失。
在一些实施方式中,在通过toDataURL方法进行压缩时,调整encoderOptions参数,encoderOptions参数的设置范围为0~1。
范围从0(最低质量和最小文件大小)到1(最高质量和最大文件大小),在大多数情况下,0.7~0.8之间给出了最佳的压缩质量和文件大小平衡,值越低压缩效率越高,生成的图像会越小,但会牺牲一定的图像品质。
S104、将输出得到的base64数据转换为目标压缩图片。
本申请所述的在线图片压缩方法,可以简便快速的在线压缩图片,图片压缩方法载入完成即可使用,不依赖后续网络,不需要专业的ps操作知识,而且能够免费提供图片压缩,具有很好的市场前景。
需要说明的是,上述对本申请的一些实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下,在权利要求书中记载的动作或步骤可以按照不同于上述实施例中的顺序来执行并且仍然可以实现期望的结果。另外,在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中,多任务处理和并行处理也是可以的或者可能是有利的。
基于同一发明构思,与上述任意实施例方法相对应的,本申请的实施例还提供了一种在线图片压缩装置。
如图2所示,所述在线图片压缩装置,包括:
获取模块11,被配置为获取待压缩图片,根据待压缩图片确定目标压缩格式,并将待压缩图片转换为base64数据;
新建模块12,被配置为新建空白图片,将空白图片的src地址指向base64数据;
压缩模块13,被配置为新建canvas画布,将空白图片绘制到canvas画布中,利用画布算法对canvas画布进行压缩,输出base64数据;
输出模块14,被配置为将输出得到的base64数据转换为目标压缩图片。
为了描述的方便,描述以上装置时以功能分为各种模块分别描述。当然,在实施本申请的实施例时可以把各模块的功能在同一个或多个软件和/或硬件中实现。
上述实施例的装置用于实现前述任一实施例中相应的在线图片压缩方法,并且具有相应的方法实施例的有益效果,在此不再赘述。
基于同一发明构思,与上述任意实施例方法相对应的,本申请的实施例还提供了一种电子设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述程序时实现如上任意一实施例所述的在线图片压缩方法。
图3示出了本实施例所提供的一种更为具体的电子设备硬件结构示意图,该设备可以包括:处理器1010、存储器1020、输入/输出接口1030、通信接口1040和总线1050。其中处理器1010、存储器1020、输入/输出接口1030和通信接口1040通过总线1050实现彼此之间在设备内部的通信连接。
处理器1010可以采用通用的CPU(Central Processing Unit,中央处理器)、微处理器、应用专用集成电路(Application Specific Integrated Circuit,ASIC)、或者一个或多个集成电路等方式实现,用于执行相关程序,以实现本说明书实施例所提供的技术方案。
存储器1020可以采用ROM(Read Only Memory,只读存储器)、RAM(Random AccessMemory,随机存取存储器)、静态存储设备,动态存储设备等形式实现。存储器1020可以存储操作系统和其他应用程序,在通过软件或者固件来实现本说明书实施例所提供的技术方案时,相关的程序代码保存在存储器1020中,并由处理器1010来调用执行。
输入/输出接口1030用于连接输入/输出模块,以实现信息输入及输出。输入输出/模块可以作为组件配置在设备中(图中未示出),也可以外接于设备以提供相应功能。其中输入设备可以包括键盘、鼠标、触摸屏、麦克风、各类传感器等,输出设备可以包括显示器、扬声器、振动器、指示灯等。
通信接口1040用于连接通信模块(图中未示出),以实现本设备与其他设备的通信交互。其中通信模块可以通过有线方式(例如USB、网线等)实现通信,也可以通过无线方式(例如移动网络、WIFI、蓝牙等)实现通信。
总线1050包括一通路,在设备的各个组件(例如处理器1010、存储器1020、输入/输出接口1030和通信接口1040)之间传输信息。
需要说明的是,尽管上述设备仅示出了处理器1010、存储器1020、输入/输出接口1030、通信接口1040以及总线1050,但是在具体实施过程中,该设备还可以包括实现正常运行所必需的其他组件。此外,本领域的技术人员可以理解的是,上述设备中也可以仅包含实现本说明书实施例方案所必需的组件,而不必包含图中所示的全部组件。
上述实施例的电子设备用于实现前述任一实施例中相应的在线图片压缩方法,并且具有相应的方法实施例的有益效果,在此不再赘述。
基于同一发明构思,与上述任意实施例方法相对应的,本申请还提供了一种非暂态计算机可读存储介质,所述非暂态计算机可读存储介质存储计算机指令,所述计算机指令用于使所述计算机执行如上任一实施例所述的在线图片压缩方法。
本实施例的计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。
上述实施例的存储介质存储的计算机指令用于使所述计算机执行如上任一实施例所述的在线图片压缩方法,并且具有相应的方法实施例的有益效果,在此不再赘述。
所属领域的普通技术人员应当理解:以上任何实施例的讨论仅为示例性的,并非旨在暗示本申请的范围(包括权利要求)被限于这些例子;在本申请的思路下,以上实施例或者不同实施例中的技术特征之间也可以进行组合,步骤可以以任意顺序实现,并存在如上所述的本申请实施例的不同方面的许多其它变化,为了简明它们没有在细节中提供。
另外,为简化说明和讨论,并且为了不会使本申请实施例难以理解,在所提供的附图中可以示出或可以不示出与集成电路(IC)芯片和其它部件的公知的电源/接地连接。此外,可以以框图的形式示出装置,以便避免使本申请实施例难以理解,并且这也考虑了以下事实,即关于这些框图装置的实施方式的细节是高度取决于将要实施本申请实施例的平台的(即,这些细节应当完全处于本领域技术人员的理解范围内)。在阐述了具体细节(例如,电路)以描述本申请的示例性实施例的情况下,对本领域技术人员来说显而易见的是,可以在没有这些具体细节的情况下或者这些具体细节有变化的情况下实施本申请实施例。因此,这些描述应被认为是说明性的而不是限制性的。
尽管已经结合了本申请的具体实施例对本申请进行了描述,但是根据前面的描述,这些实施例的很多替换、修改和变型对本领域普通技术人员来说将是显而易见的。例如,其它存储器架构(例如,动态RAM(DRAM))可以使用所讨论的实施例。
本申请实施例旨在涵盖落入所附权利要求的宽泛范围之内的所有这样的替换、修改和变型。因此,凡在本申请实施例的精神和原则之内,所做的任何省略、修改、等同替换、改进等,均应包含在本申请的保护范围之内。

Claims (8)

1.一种在线图片压缩方法,其特征在于,所述方法包括:
获取待压缩图片,根据所述待压缩图片确定目标压缩格式,并将所述待压缩图片转换为base64数据;
新建空白图片,将所述空白图片的src地址指向所述base64数据;
新建canvas画布,将所述空白图片绘制到所述canvas画布中,利用画布算法对所述canvas画布进行压缩,输出base64数据;
将输出得到的所述base64数据转换为目标压缩图片。
2.根据权利要求1所述的在线图片压缩方法,其特征在于,所述新建空白图片,将所述空白图片的src地址指向所述base64数据,包括:
将转换后的base64字符串写入至新建的所述空白图片中,并作为待压缩图片的载体。
3.根据权利要求2所述的在线图片压缩方法,其特征在于,所述新建canvas画布,将所述空白图片绘制到所述canvas画布中,利用画布算法对所述canvas画布进行压缩,输出base64数据,包括:
创建canvas画布,并将所述canvas画布的画布大小设置为与所述待压缩图片一致;
获取2D渲染上下文对象;
在canvas画布中绘制所述待压缩图片;
利用画布像素压缩算法对画布中绘制的所述待压缩图片进行压缩处理,将压缩后的所述待压缩图片数据以base64字符串格式输出。
4.根据权利要求3所述的在线图片压缩方法,其特征在于,所述利用画布像素压缩算法对画布中绘制的所述待压缩图片进行压缩处理,将压缩后的所述待压缩图片数据以base64字符串格式输出,包括:
通过canvas的toDataURL方法进行压缩,将压缩后的canvas画布中的内容导出为base64字符串。
5.根据权利要求4所述的在线图片压缩方法,其特征在于,包括:
在通过toDataURL方法进行压缩时,调整encoderOptions参数,所述encoderOptions参数的设置范围为0~1。
6.一种在线图片压缩装置,其特征在于,包括:
获取模块,被配置为获取待压缩图片,根据所述待压缩图片确定目标压缩格式,并将所述待压缩图片转换为base64数据;
新建模块,被配置为新建空白图片,将所述空白图片的src地址指向所述base64数据;
压缩模块,被配置为新建canvas画布,将所述空白图片绘制到所述canvas画布中,利用画布算法对所述canvas画布进行压缩,输出base64数据;
输出模块,被配置为将输出得到的所述base64数据转换为目标压缩图片。
7.一种电子设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,其特征在于,所述处理器执行所述程序时实现权利要求1-5任一项所述的在线图片压缩方法。
8.一种非暂态计算机可读存储介质,其特征在于,其中,所述非暂态计算机可读存储介质存储计算机指令,所述计算机指令用于使所述计算机执行权利要求1-5任一项所述的在线图片压缩方法。
CN202310797606.1A 2023-06-30 2023-06-30 在线图片压缩方法、装置、电子设备及存储介质 Pending CN116821080A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310797606.1A CN116821080A (zh) 2023-06-30 2023-06-30 在线图片压缩方法、装置、电子设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310797606.1A CN116821080A (zh) 2023-06-30 2023-06-30 在线图片压缩方法、装置、电子设备及存储介质

Publications (1)

Publication Number Publication Date
CN116821080A true CN116821080A (zh) 2023-09-29

Family

ID=88125540

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310797606.1A Pending CN116821080A (zh) 2023-06-30 2023-06-30 在线图片压缩方法、装置、电子设备及存储介质

Country Status (1)

Country Link
CN (1) CN116821080A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117456016A (zh) * 2023-10-27 2024-01-26 四川中屹互联信息技术有限公司 基于canvas的图像分块压缩、重构方法、系统及应用

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117456016A (zh) * 2023-10-27 2024-01-26 四川中屹互联信息技术有限公司 基于canvas的图像分块压缩、重构方法、系统及应用

Similar Documents

Publication Publication Date Title
US10564920B2 (en) Dynamic server-side image sizing for fidelity improvements
CN109685746B (zh) 图像亮度调整方法、装置、存储介质及终端
CN106030503B (zh) 自适应视频处理
US10164459B2 (en) Selective rasterization
US8687908B2 (en) Sample based tone mapping method for high dynamic range images
CN110750664B (zh) 图片的显示方法及装置
WO2015038307A1 (en) Guided image upsampling using bitmap tracing
CN104978433A (zh) 一种网页显示方法及装置
CN116821080A (zh) 在线图片压缩方法、装置、电子设备及存储介质
CN110782387A (zh) 图像处理方法、装置、图像处理器及电子设备
US9501812B2 (en) Map performance by dynamically reducing map detail
JP2021006982A (ja) 文字の色を決定する方法および装置
CN117076811A (zh) 一种网页导出方法、装置、设备及存储介质
US10679321B2 (en) Efficient release of target memory
CN113625923A (zh) 基于远程云桌面的鼠标处理方法、装置、存储介质及设备
US10321164B2 (en) System and method for improving graphics and other signal results through signal transformation and application of dithering
CN111597476B (zh) 图像处理方法及装置
CN112445394B (zh) 一种截图方法和装置
CN114119423A (zh) 图像处理方法、装置、电子设备和存储介质
US20170124029A1 (en) System and method of producing dynamically customized images
CN112367399A (zh) 滤镜效果生成方法及装置、电子设备以及存储介质
US9807315B1 (en) Lookup table interpolation in a film emulation camera system
CN111462008B (zh) 低照度图像增强方法、低照度图像增强装置和电子设备
WO2024056055A1 (zh) 直播特效礼物的生成方法、装置、设备及存储介质
CN113934491B (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