js实现图片压缩【无需导包】

我使用的是 Canvas API 来实现图片压缩

Canvas API 是 HTML5 标准提供的，不需导入额外的包，可以在任何支持 HTML5 标准的浏览器中使用。因此，在 Vue 中使用 Canvas API 实现图片压缩时也不需要导入额外的包，只需要在 Vue 组件中编写 Canvas 相关代码。

首先介绍一下使用Canvas API实现图片压缩的步骤：

1.获取需要压缩的图片路径或 Blob 对象。我们可以通过 input 元素的 type 属性设置为 file，选择本地图片后获取其路径，或由其他方式获得图片的 Blob 对象。

2.创建一个新的 Image 对象，加载需要压缩的图片。

const img = new Image();
img.onload = function() {
  // 在此处理图片
};
img.src = src;

3.在回调函数中，创建一个新的 Canvas 元素，设置画布宽度(height和width)、压缩质量等属性，将图片绘制到 Canvas 上。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 500; // 宽度可以根据实际需求设置
canvas.height = img.height / img.width * 500;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

4.调用 toDataURL 方法，将画布中的图片数据转换成 Base64 编码的字符串。

const dataURL = canvas.toDataURL('image/jpeg', 0.8); // 设置quality参数控制质量（即第二个参数）

5.最终获取到的 dataURL 即是压缩后的图片数据，可以提交给后端或者保存至本地。

tip：在使用 Canvas API 进行图片压缩时，压缩质量的选择需要兼顾图片质量和压缩比例。一般认为，图片质量越高，压缩比例越低，压缩后的图片体积也就越大。因此，我们可以通过尝试手动调整 quality 参数的值，不断测试输出来找到最佳的图片压缩质量和压缩比例。

这里我再提供一个vue测试代码，可以在控制台中打印出图片压缩前后的size，以及图片压缩后的回显。

实现效果：

再强调提示一嘴：

可以通过第二个参数来设置图片的压缩质量，该参数的取值范围是0到1，其中0表示最低质量（最高压缩），1表示最高质量（最低压缩，默认值为0.92）。我们可以根据实际需求进行调整，比如设置为0.8：

const dataURL = canvas.toDataURL("image/jpeg", 0.8);
console.log(`压缩后文件大小：${formatSizeUnits(dataURL.length)}`);

注意，像PNG格式的图片因为压缩算法的不同，设置压缩质量的参数不一定会生效。压缩后的图片质量会有所降低，可以根据实际情况进行考虑。

再提一嘴，可能有人有疑惑。

就是如果后续需要把压缩后的图片比如说进行上传操作，我们得得到处理后图片的Base64 编码就好办了，其实这个 Base64 编码就在眼前。

将图片压缩后，我们会得到一个 Base64 编码的字符串，该字符串包括了压缩后的图片数据以及一些元信息，如图片格式、压缩质量等。这个字符串可以直接用于将压缩后的图片显示在页面上，也可以用于上传至服务器端进行保存。

（不会有人不知道Base64 编码可以直接放到img标签的src属性里显示出图片吧）

具体返回值的格式如下：

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/...

其中 "data:image/jpeg;base64," 表示图片的格式为 JPEG 格式，如果是 PNG 格式则为 "data:image/png;base64," ，后面的长字符串就是压缩后的图片数据。我们可以通过解码这个字符串，获取到图片的二进制数据，进而进行一些其他的操作。例如，通过发送 HTTP 请求将图片上传到服务器上，或者将这个字符串发送到后台进行其他处理。。。

好，真的结束了

---

再提一嘴...

可能有人会问测试代码中handleChange方法中最后一句reader.readAsDataURL(file)是什么意思？

解释一下。

reader.readAsDataURL(file) 是将文件读取为 DataURL 的方法，它通过使用 FileReader 对象来读取指定的文件，并返回一个格式为 DataURL 的字符串，表示文件的数据。

reader.readAsDataURL(file) 中的 file 是二进制文件数据的来源，也就是从 input[type="file"] 元素中获取的文件对象。我们调用这个方法时，FileReader 会自动将文件读取为一个 DataURL，并将其存储在 reader.result 属性中。之后我们可以将 reader.result 的值赋给 img 标签的 src 属性或者其他需要用到文件数据的地方。

所以这一行代码的作用就是将从 input[type="file"] 元素中读取到的文件数据读取为 Base64 编码的字符串，可以用于展示或上传至服务器。

完