导航菜单

使用canvas压缩图片大小

【目录】

问题来源

思考分析

前提功能

将文件转换为base64

将base64转换为文件流

压缩方法

使用方法

问题摘要

图像压缩级别

最初想要对图像进行递归压缩,直到图像大小符合预期

Ios射击方向问题

这个问题源于这样的事实:在上传图像文件时,背景限制为2MB,但是当相机被拿起时,分钟数超过2MB。为了不影响用户体验和功能要求,前端需要压缩大小然后通过。到后台。

我发现了很多信息,发现只有画布可以压缩图像。

原则可能是:

1,首先将图像文件转换为baseURL

2.创建图像标记以接收文件以获取图像的宽度和高度。

3.创建画布画布以设置画布的大小。

4.将图片绘制到画布上。

5.压缩画布以获得新的baseURL

6.将baseURL转换回文件。

文件的大小以字节为单位,因此我们需要将所需的大小转换为字节。

1字节是1字节是1B,1KB=1024B,1MB=1024 * 1024B

图像的压缩程度不是很好,因此您可以根据需求方的要求进行多次尝试并进行调整。

改变目标图像的大小和清晰度可以改变图像的压缩。

后来发现了

当这件作品正在进行时,它将导致循环无法跳出并浪费资源。

如果图像被压缩了几次,文件大小就不会改变,有时它会增加,这很奇怪。

所以我放弃了递归。

因为ios拿起相机,相机逆时针旋转90度。

压缩图像并将其传递到背景后,我发现exif信息的图像丢失,导致ios上传的图像逆时针旋转90度。 Android尚未发现此问题。

6100773-386daa19c894aa25.png

Image.png

当base64转换为文件时,有人怀疑它会丢失。

经过验证,将在此补充。