[发明专利]一种Web端图片压缩方法、装置及电子设备

说明书

本发明公开了一种Web端图片压缩方法、装置及电子设备，所述方法包括：通过FileReader读取图片内容及尺寸；判断所述图片尺寸是否大于预设图片尺寸；若所述图片尺寸大于预设图片尺寸，通过canvas对图片内容进行压缩；通过canvas输出指定图片格式的数据；将所述指定图片格式的数据上传至服务器。通过本发明能够实现Web端对图片的压缩上传功能，从而提高上传速度，并节约流量，提高Web端图片上传效率，满足业务需要。

技术领域

本发明涉及互联网技术领域，具体而言，涉及一种Web端图片压缩方法、装置、电子设备及计算机可读介质。

背景技术

随着互联网技术的发展，很多业务可以直接通过Web客户端来办理。其中，Web客户端主要指web浏览器(Browser)。其主要功能是将用户向服务器请求的Web资源呈现出来，显示在浏览器窗口中。目前，很多业务有大量图片上传的场景，而随着摄像设备的升级，拍摄出来的图片也越来越大，这就需要Web端在上传图片之前对图片进行压缩。

目前，Web端主要采用HTML5(简称H5)，即第5代超文本标记语言来实现，而现有H5无法对图片进行压缩处理，这就导致Web端只能以原图上传图片，出现上传缓慢、浪费流量，影响业务办理。

发明内容

本发明旨在解决Web端无法对图片压缩，导致图片上传效率低下的技术问题。

为了解决上述技术问题，本发明第一方面提出一种Web端图片压缩方法，所述Web端基于HTML5开发，所述方法包括：

通过FileReader读取图片内容及尺寸；

判断所述图片尺寸是否大于预设图片尺寸；

若所述图片尺寸大于预设图片尺寸，通过canvas对图片内容进行压缩；

通过canvas输出指定图片格式的数据；

将所述指定图片格式的数据上传至服务器。

根据本发明一种优选的实施方式，通过FileReader的Input读取图片内容及尺寸。

根据本发明一种优选的实施方式，所述通过FileReader读取图片内容及尺寸之后，所述方法还包括：

创建一个Image对象；

将FileReader读取的图片内容及尺寸存入Image对象中。

根据本发明一种优选的实施方式，通过canvas.drawImage对所述Image对象进行等比压缩。

根据本发明一种优选的实施方式，通过canvas.toBlob输出Blob格式的数据；

或者，通过canvas.toDataURL输出base64格式的数据。

根据本发明一种优选的实施方式，若输出Blob格式的数据，通过FormData对象将所述Blob格式的数据上传至服务器；

若输出base64格式的数据，将base64格式的数据通过ajax上传到服务器；或者；创建一个Blob对象，将base64格式的数据存入所述Blob对象中得到Blob格式的数据，通过FormData对象将所述Blob格式的数据上传至服务器。

为了解决上述技术问题，本发明第二方面提供一种Web端图片压缩装置，所述Web端基于HTML5开发，所述装置包括：

读取模块，用于通过FileReader读取图片内容及尺寸；

判断模块，用于判断所述图片尺寸是否大于预设图片尺寸；

压缩模块，用于若所述图片尺寸大于预设图片尺寸，通过canvas对图片内容进行压缩；