JS的前端图片压缩

2023-11-24 06:07:06

图片是web应用中常见的元素之一，但过大的图片可能会拖慢网站的加载速度，影响用户体验。前端JS图片压缩技术可以有效地减小图片的大小，同时保持图片质量，从而提高web应用的性能。

JS图片压缩基本原理

JS图片压缩的基本原理是利用Canvas API的drawImage()方法，将大图片画在一张小画布上，从而实现压缩效果。drawImage()方法的语法如下：

drawImage(image, dx, dy, dw, dh, sx, sy, sw, sh);

image：要绘制的图片对象。
dx、dy：图片在画布上的起始位置。
dw、dh：图片在画布上的宽高。
sx、sy：图片在原始图像中的起始位置。
sw、sh：图片在原始图像中的宽高。

JS图片压缩实现方法

使用JS实现图片压缩的具体步骤如下：

创建一个Canvas对象。
将图片对象添加到Canvas对象中。
使用drawImage()方法将图片画在一张小画布上。
将小画布转换为DataURL。
将DataURL转换为Blob对象。
将Blob对象上传到服务器。

JS图片压缩代码示例

function compressImage(image, maxWidth, maxHeight) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  // 计算压缩后的图片宽高
  const width = Math.min(image.width, maxWidth);
  const height = Math.min(image.height, maxHeight);

  // 将图片画在一张小画布上
  context.drawImage(image, 0, 0, width, height);

  // 将小画布转换为DataURL
  const dataURL = canvas.toDataURL('image/jpeg', 0.8);

  // 将DataURL转换为Blob对象
  const blob = dataURLtoBlob(dataURL);

  return blob;
}

function dataURLtoBlob(dataURL) {
  const arr = dataURL.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}