有图有真相，JS图片压缩常见方法快速上手指南

为什么要压缩图片？

• 节省带宽和加载时间： 压缩图片可以减少文件大小，从而减少加载时间，提高网站性能。
• 优化用户体验： 快速加载的页面能提供更好的用户体验。
• 提高搜索引擎排名： 谷歌等搜索引擎会考虑网页加载速度作为排名因素。

JS中图片压缩的常见方法

1. 使用原生JavaScript API

// 创建一个新的Canvas对象
const canvas = document.createElement('canvas');

// 获取图片的原始尺寸
const originalWidth = image.width;
const originalHeight = image.height;

// 计算目标尺寸
const newWidth = originalWidth * 0.5;
const newHeight = originalHeight * 0.5;

// 设置Canvas的尺寸
canvas.width = newWidth;
canvas.height = newHeight;

// 将图片绘制到Canvas上
const ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, originalWidth, originalHeight, 0, 0, newWidth, newHeight);

// 将Canvas转换为Blob对象
canvas.toBlob(function(blob) {
  // 上传Blob对象
  uploadFile(blob);
}, 'image/jpeg', 0.9);

2. 使用第三方库

• Image Compressor

const imageCompressor = new ImageCompressor();
imageCompressor.compress(image, {
  quality: 0.9,
  mimeType: 'image/jpeg',
  maxWidth: 1000,
  maxHeight: 1000,
  convertSize: 1000000
}).then((result) => {
  // 上传压缩后的图片
  uploadFile(result);
});

• Jpegoptim

const jpegoptim = require('jpegoptim');
jpegoptim.optimize(image, {
  max: 80
}).then((result) => {
  // 上传压缩后的图片
  uploadFile(result);
});

总结

在本文中，我们探讨了JS中图片压缩的常见方法，包括原生JavaScript API和第三方库。选择哪种方法取决于您的具体需求和开发环境。无论哪种方法，压缩图片都可以节省带宽、提高网站性能并优化用户体验。