JS中图片压缩的一般方法

一、JS中图片压缩的一般方法

本文介绍了一套在JavaScript中处理图片压缩的方法，以适应不同场景需求。首先，明确需求是将不同形式的图片（URL、canvas画布、Image对象、base64字符串等）转换并压缩为可传输的形式，包括File对象、Blob对象、dataURL字符串等。接下来，具体介绍了七种方法来实现这一目标：

1. `urltoImage(url, fn)`：接收图片URL加载图片对象，回调返回Image对象。

2. `imagetoCanvas(image)`：将Image对象转换为Canvas对象。

3. `canvasResizetoFile(canvas, quality, fn)`：接收Canvas对象，通过指定质量压缩为Blob对象，回调返回Blob对象。

4. `canvasResizetoDataURL(canvas, quality)`：同上，但将压缩的Canvas对象转化为dataURL字符串。

5. `filetoDataURL(file, fn)`：将File（Blob）类型文件转化为dataURL字符串。

6. `dataURLtoImage(dataurl, fn)`：将dataURL字符串转换为Image对象。

7. `dataURLtoFile(dataurl)`：将dataURL字符串转换为Blob对象。

最后，提出将常用需求封装为简化的方法，如将文件对象压缩后转为文件对象，简化代码使用。所有方法已封装在GitHub仓库中，欢迎查看和star。

二、如何实现JS中图片压缩方法

本文主要介绍JS中图片压缩的方法，包括等比压缩图片的方法,需要的朋友可以参考下，希望能帮助到大家。

大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器；有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库；有时候后它还有可能是一块canvas画布，或者是一个Image对象，或者直接就是一个图片的url地址，我们需要将它们压缩上传到远程；面对这么多的需求，索性画了一张图：

如上图所示，王二一共写了七个方法，基本覆盖了JS中大部分文件类型的转换与压缩，其中：

1、 urltoImage(url,fn)会通过一个url加载所需要的图片对象，其中 url参数传入图片的 url, fn为回调方法,包含一个Image对象的参数，代码如下：

2、 imagetoCanvas(image)会将一个 Image对象转变为一个 Canvas类型对象，其中 image参数传入一个Image对象，代码如下：

3、 canvasResizetoFile(canvas,quality,fn)会将一个 Canvas对象压缩转变为一个 Blob类型对象；其中 canvas参数传入一个 Canvas对象; quality参数传入一个0-1的 number类型，表示图片压缩质量; fn为回调方法，包含一个 Blob对象的参数;代码如下：

这里的 Blob对象表示不可变的类似文件对象的原始数据。 Blob表示不一定是 JavaScript原生形式的数据。 File接口基于 Blob，继承了 Blob的功能并将其扩展使其支持用户系统上的文件。我们可以把它当做File类型对待，其他更具体的用法可以参考MDN文档

4、 canvasResizetoDataURL(canvas,quality)会将一个 Canvas对象压缩转变为一个 dataURL字符串,其中 canvas参数传入一个 Canvas对象; quality参数传入一个0-1的 number类型，表示图片压缩质量;代码如下：

其中的 toDataURL API可以参考MDN文档

5、 filetoDataURL(file,fn)会将 File（ Blob）类型文件转变为 dataURL字符串,其中 file参数传入一个 File（ Blob）类型文件; fn为回调方法，包含一个 dataURL字符串的参数;代码如下：

6、 dataURLtoImage(dataurl,fn)会将一串 dataURL字符串转变为 Image类型文件,其中 dataurl参数传入一个 dataURL字符串, fn为回调方法，包含一个 Image类型文件的参数，代码如下：

7、 dataURLtoFile(dataurl)会将一串 dataURL字符串转变为 Blob类型对象，其中 dataurl参数传入一个 dataURL字符串,代码如下：

对于常用的将一个 File对象压缩之后再变为 File对象,我们可以将上面的方法再封装一下，参考如下代码：

其中， file参数传入一个 File（ Blob）类型文件； quality参数传入一个 0-1的 number类型，表示图片压缩质量； fn为回调方法，包含一个 Blob类型文件的参数。

这样的话，图片压缩上传就能轻松地搞定了，以上的8个方法我已经封装好放到 github上了，喜欢的话可以使劲的star哈。

ps：下面看下JS等比压缩图片的办法

三、JS前端图片最优化压缩方案

上传图片是前端常见的操作，大图片往往会影响用户体验。适当压缩图片，可显著提升体验。在后台管理系统中，图片压缩不仅提升管理员的操作体验，还能防止因图片过大导致前台加载缓慢。思考压缩图片的基本流程涉及读取文件，转换为base64编码，创建img元素，将img画到canvas上，使用toDataURL或toBlob导出，最后转换为File。准备HTMLCanvasElement.toDataURL()方法返回一个包含图片的data URI。语法为canvas.toDataURL(type, encoderOptions)。

type参数可选，默认为image/png。encoderOptions在指定为image/jpeg或image/webp的情况下，可从0到1选择质量。quality值越小，文件体积越小。实践发现，quality默认0.92时，图片大小反而增大。继续尝试quality为0.1时，图片仅为1.63kb。结论表明，quality在0.2~0.5之间时，压缩效率最高，图片质量变化不大。

优化中发现大尺寸图片问题，优化了等比例缩小图片，极大提升压缩效率。以14M、6016X4016的图片为例，压缩后尺寸为1400X935，大小仅139.62KB。优化后的压缩方法考虑了文件大小，根据大小调整quality值，更适应不同场景。

TS版本的优化方案更加简洁，性能也有所提升。文件转为base64，创建img元素，绘制到canvas，再转为Blob，最后转换为File。此方法不仅适用于前端，还能提升开发效率，减少代码量。

以上就是JS前端图片最优化压缩方案的详细内容。更多关于JS前端图片压缩的信息，请关注相关技术社区。