H5 Canvas画布批量图片压缩上传：提效降耗，提升用户体验

前端

2023-09-20 10:19:44

图片作为网页内容的重要组成部分，在现代Web开发中发挥着至关重要的作用。然而，过大的图片尺寸会带来一系列问题，包括：上传缓慢、存储空间占用大、加载缓慢，进而影响用户体验。

在H5 canvas画布中，可以通过利用HTML5提供的API对图片进行批量压缩，从而解决上述问题，提升开发效率和用户体验。

批量压缩图片的必要性

在某些场景下，网站或应用程序对图片清晰度的要求并不高，例如缩略图、预览图等。此时，上传大尺寸图片不仅没有必要，还会造成资源浪费。批量压缩图片可以有效降低图片体积，减轻服务器存储和网络传输压力，同时优化页面加载速度，提升用户体验。

实现原理

H5 canvas画布提供了drawImage()方法，可以将图片绘制到画布上，并指定绘制区域的大小。通过巧妙利用这个特性，我们可以将大尺寸图片按比例绘制到小尺寸的画布上，从而实现图片压缩。

具体的实现步骤如下：

创建一个新的canvas画布，指定目标宽度和高度；
使用drawImage()方法将图片绘制到canvas上，指定绘制区域；
通过toDataURL()方法将canvas转换成DataURL格式，得到压缩后的图片数据。

代码示例

function compressImage(file, width, height) {
  return new Promise((resolve, reject) => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();

    img.onload = () => {
      canvas.width = width;
      canvas.height = height;

      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, width, height);

      const compressedData = canvas.toDataURL('image/jpeg', 0.7); // 调整质量参数以控制压缩率
      resolve(compressedData);
    };

    img.src = file;
  });
}